我看过这里和各种教程,但无法达到我需要的效果。
因此,如果页面内容高度低于 600 像素,我希望页脚固定在该高度的容器下方。
但是,如果内容将容器高度增加到超过 600 像素,则页脚应被容器向下推到页面上。
我尝试使用 min-height 来使用,我的 html 看起来像这样
<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>
我不会费心发布 CSS,因为它根本不接近。
你可以通过 CSS Trick 来做到这一点,
/* CSS 代码 */
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div class="body">
</div>
</div>
<div class="footer">
Footer
</div>
</div>
这是我的小提琴文件 http://jsfiddle.net/8AuAn/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)