footer 贴在底部的布局实现代码_ Div+Css教程-查字典教程网
footer 贴在底部的布局实现代码
footer 贴在底部的布局实现代码
发布时间:2016-12-27 来源:查字典编辑
摘要:footer位置自适应cccsssfffhtml,body,#wrap{height:100%;}body>#wrap{height:aut...

footer位置自适应

<div id="wrap">

<div id="main">

<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 */

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类