使页脚正确地粘在页底我试图让我的页脚(只是一个div，其中有一行文本)在屏幕底部，如果内容没有一直走到底部，或者在内容需要滚动条时位于内容的底部。如果内容不需要滚动条，它可以很好地工作，但是当内容太长时，页脚仍然位于相同的位置，就在内容的顶部。我的基本部门结构是：<div id="container">
<div id="body"></div>
<div id="footer"></div></div>我相应的CSS(略为删减)：body {
margin: 0;
padding: 0;
height: 100%;}html {
margin: 0;
padding: 0;
height: 100%;}#container {
width: 674px;
min-height: 100%;
height: 100%;
position: relative;
margin: 0 auto;}#body {
width: 616px;
padding: 5px 14px 5px 14px;
margin: 0 auto;
padding-bottom: 20px;}#footer {
position: absolute;
bottom: 0;
width: 644px;
height: 20px;
margin: 0 auto;}
3 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
min-height<html><footer>position:absolute;
演示:
html {
position: relative;
min-height: 100%;}body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;}footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;}<article> <!-- or <div class="container">, etc. --> <h1>James Dean CSS Sticky Footer</h1> <p>Blah blah blah blah</p> <p>More blah blah blah</p></article><footer> <h1>Footer Content</h1></footer>
- 3 回答
- 0 关注
- 362 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消