我正在尝试为网格创建粘性页脚。
一旦我将 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>
最佳答案
事实证明,出于某种原因,我不明白页脚需要 clear:both
才能解决问题。
关于css - 位置 : Sticky causes my div to double in size and overlay a previous div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52353488/