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值,需要保持一致。原理大家肯定都懂了,就不多说了!