我试图让我的页脚(只有一个带有一行文本的div)位于屏幕的底部,如果内容不是一直到底部,或者是在内容的底部,如果内容需要滚动条.如果内容不需要滚动条,则它可以很好地工作,但是当内容太长时,页脚仍然位于同一位置,位于内容的顶部.
我的基本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;
}
小智 197
最简单的解决方案是使用min-height的<html>标签和位置<footer>与position:absolute;
演示:jsfiddle和SO片段:
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>Nic*_*not 30
为什么不使用:{ position: fixed; bottom: 0 }？
San*_*eev 16
我使用的简单解决方案适用于IE8 +
在html上给出min-height:100%,这样如果内容少了,那么页面底部会占据完整的视口高度和页脚.当内容增加时,页脚会随着内容向下移动并保持坚持到底.
JS小提琴演奏演示:http://jsfiddle.net/3L3h64qo/2/
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
小智 5
用这个吧。它会修复它。
#ibox_footer {
padding-top: 3px;
position: absolute;
height: 20px;
margin-bottom: 0;
bottom: 0;
width: 100%;
}
| 归档时间： |
|
| 查看次数： |
445113 次 |
| 最近记录： |