footer处在底部并不是fix在底部(一直在浏览器窗口底部)
style文件
//
// Footer沉底
//
html,body{
height:100%;
}
.container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
footer{
height:4em;
}
.pb-80{
padding-bottom:80px;
}//不加这个是中间的内容的超过整个屏幕的情况下footer会覆盖文字
//
// End Footer沉底
//
页面结构必须这样
<div id="container">
<div class="pb-80">页面正文</div>
</div>
<footer>...</footer>
项目亲测成功,nice啊
2015年6月6日21:14:50
后续开发当然还有各种问题,真正理解这个footer沉底就是,页面上两个上下块,让上面的块高度100%;然后再padding-bottom:75px; 这样就预留出75px的高度给下面的块,下面的块设置margin-top:-75px; 根据自己的需要去修改这个高度了,如果出现各种问题,那都是footer的内容给footer撑开了,算好每个像素,没有问题的。
//
// start Footer 沉底
//
html,body{
height:100%;
}
.container{
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 75px;
/*margin: 0 auto -60px;*/
}
footer{
margin-top:-75px;
}
//
// End Footer 沉底
//