css经典布局—stick footer布局

html部分
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content"></div>
        <div id="side"></div>
    </div>
</div>
<div id="footer"></div>

css部分

*{padding: 0;margin: 0;}
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;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}

  

原文地址:https://www.cnblogs.com/wmydb/p/8125372.html