案例1:仅仅保存在页面底部。不固定。
思路:
html:
<div class="body">
<header>我是头部</header>
<div class="content">我是内容</div>
</div>
<footer>我是页脚,我总是固定在页面底部</footer>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%; /*让页面撑满窗体*/
}
.body {
min-height: 100%;
height: auto !important;
height: 100%; /*设置页面内容区域最小占满窗体高度*/
margin: 0 0 -41px; /*利用margin负值留出footer的区域(因为footer设置了1px的border,所以值在原有高度上+1)*/
text-align: center;
}
footer {
height: 40px;
line-height: 40px;
border-top: 1px solid #ddd;
text-align: center;
}
.content{
width: 100%;
height: 900px;
}
固定底部显示:
demo地址:
http://codepen.io/tianzi77/pen/aOrBdb
代码就是加入了
position: fixed;
right: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
让他永远在站点底部显示出来!