Sticky Footer: 完美的CSS绝对底部

CSS Sticky Footer: 完美的CSS绝对底部

前段时间在做项目时,遇到一个问题,如下:
移动端的正文内容不定,内容较少时,底部的组件位于窗口的下面;但是当内容较多时,底部的部件和正文和出现重叠的BUG.
因此,找到这么一个完美的完美的解决办法,源于国外牛人

//html代码
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
//底部与外层同级
<div id="footer"></div>

//css代码
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;}

需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。原理大家肯定都懂了,就不多说了!