做免费网站-学做网站这个网页底部,为什么会跑到那儿呢?即使内容很少情况下,它也始终在页面底部布局。
否则页面底部将留下大量空白。
下面是它实现代码:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</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;
clear:both;}
做免费网站-学做网站兼容性Hack:
.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 */ |