本来打算找一篇关于footer置底的文章,分享给朋友,发现网上很多方法太麻烦,所以我写一篇简单的文章来讲讲如何让footer置底
html布局(很重要)
<div class="box"> <!--最外层盒子-->
<div class="box_wrap"> <!-- 内容区,所有的东西都放在这里,除了footer-->
</div>
<div class="footer"> <!-- 页脚 -->
</div>
</div>
css部分
html,body{
height:100%; /*首先给html、body设置高度100%*/
}
.box{
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
.box_wrap {
padding-bottom: 60px; /*等于footer的高度*/
}
.footer {
position: absolute;
left:0;
bottom: 0;
width: 100%;
height: 60px; /*脚部的高度,等于box_warp的padding-bottom值*/
}
这样,一个简单的footer置底的页面就布局好了。