css中的Sticky footer 布局

什么叫Sticky footer 布局呢？

我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。

一般网上会推荐几种方法，但经过亲身实践，我发现还是负margin布局方式比较实用，兼容性最好

它的布局是：

     

	    

	      	/*main部分*/
	    
  
	
	

	    /*footer部分*/
	

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了