有谁知道将页脚固定在 div 底部的方法,例如 position: fixed
元素。我发现的所有方法都将其粘贴在起始 View 的底部或底部,因此您必须一直向下滚动才能看到它们。
我试过将父级设置为position:relative
,将子级设置为position: absolute
,并且还使用了display: table-cell
和 vertical-align: bottom
,但它们都不会在您滚动时将其固定在原位,而是将其保持在 div 底部或默认 View 底部的静态位置。
.a{
position:relative;
background-color:#ccc;
width:500px;
min-height: 150px;
max-height: 150px;
overflow-y: scroll;
float:left;
padding:8px;
}
.footer{
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#666;
color:#fff;
}
<div class="a">
Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
<div class="footer">Some text</div>
</div>
最佳答案
你真的不能,不是你想要的方式,你需要使用 jquery 来继续移动位置。
您可以做的是用一个容器包裹整个区域,这是最简单的解决方案。
.outer {
position:relative;
width:500px;
}
.a{
background-color:#ccc;
min-height: 150px;
max-height: 150px;
overflow-y: scroll;
padding:8px;
}
.footer{
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#666;
color:#fff;
}
<div class="outer">
<div class="a">
Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
</div>
<div class="footer">Some text</div>
</div>
关于html - 将元素定位在 div 底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33621120/