作家
登录

footer 贴在底部的布局实现代码

作者: 来源:www.28hudong.com 2012-11-19 22:28:48 阅读 我要评论

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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)