footer位置自适应复制代码代码如下: <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> ccc </div> <div id="side"> sss </div> </div> </div> <div id="footer"> fff </div> 复制代码代码如下: 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; background: #ddd; clear: both;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

　　推荐阅读

　　CSS Expression 优化

IE 浏览器中 CSS Expression 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。 如何对 CSS Expression 进行优化呢？ 至少：如果我们将 CSS Expression 在匹配的元素中仅执行一次，>>>详细阅读

本文标题：footer 贴在底部的布局实现代码

地址：http://www.17bianji.com/kaifa2/CSS/16671.html

 1/2    1