css - 位置 : Sticky causes my div to double in size and overlay a previous div

Question

我正在尝试为网格创建粘性页脚。

一旦我将 position:sticky; 和 bottom:0px 添加到页脚，页脚的大小就会加倍并覆盖我之前的 div(网格中的行)

之前:

之后:

这是我的代码:

    html,
    body {
      height: 100%;
      margin: 0;
    }

    .fixed_header {
      width: 300px;
      height: 300px;
      overflow: scroll;
    }

    .td,
    .th {
      background-color: antiquewhite;
      width: 100px;
      float: left;
    }

    .thead {
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
    }

    .th {
      font-weight: bold;
    }

    .tr {
      display: block;
      clear: both;
      width: 500px;
    }

    .thead>div>div:nth-child(1) {
      left: 0;
      top: 0;
      position: -webkit-sticky;
      position: sticky;
    }

    div.tbody>div.tr>div:nth-child(1) {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
    }

    div.tfooter {
      position: -webkit-sticky;
      position: sticky;
      bottom:0px;
      background-color: green;
      /* width: 500px; */
    }

<div class="myGrid">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>

  </div>
  <div class="tfooter">
    this is my footer
  </div>

</div>

Answer 1

事实证明，出于某种原因，我不明白页脚需要 clear:both 才能解决问题。