将元素放置在div的底部
将元素放置在div的底部
提问于 2015-11-10 09:00:10
有没有人知道像position: fixed元素一样把页脚粘在div底部的方法。我发现的所有方法都把它放在起始视图的底部，或者放在底部，所以你必须一直向下滚动才能看到它们。
我尝试过将父对象设置为position:relative，将子对象设置为position: absolute，也使用了display: table-cell和vertical-align: bottom，但都没有在滚动时将其固定在原地，而是在div底部或默认视图的底部保持不动。
.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>
Stack Overflow用户
回答已采纳
发布于 2015-11-10 09:11:04
你真的不能，不能以你想要的方式，你需要使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33621120
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号