什么叫Sticky footer 布局呢?
我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布。当页面内容较多时,页脚能随着文档流自动撑开,显示在页面的最底部,这就是Sticky footer布局。
一般网上会推荐几种方法,但经过亲身实践,我发现还是负margin布局方式比较实用,兼容性最好
它的布局是:
<div class="wrapper-sticky clearfix-sticky">
<div class="content-sticky">
/*main部分*/
</div>
</div>
<div class="footer-sticky">
/*footer部分*/
</div>
css:
/* Sticky footer 布局 */
.clearfix-sticky{
display: inline-block;
}
.clearfix-sticky:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html, body, .wrapper-sticky{
height: 100%; /*为了 这个100%能够生效 ,父级必须也要设height: 100%;*/
}
.wrapper-sticky {
width: 100%;/* 此处加width: 100%;是因为.clearfix-sticky{display: inline-block;}的设置影响了布局 */
height: auto;
min-height: 100%;
}
.content-sticky {
padding-bottom: 120px; /* 必须使用和footer相同的高度 */
}
.footer-sticky {
position: relative;
margin-top: -120px; /* footer高度的负值 */
height: 120px;
clear:both;
}
这样就OK了