所谓的sticky footer就是指:
当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到
而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位
当内容区域不够时:
当内容区域足够长时:
HTML:
<div>我是头部</div>
<div class="content" >
<ul class="oUl" ></ul>
</div>
<div>我是底部</div>
CSS:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.content{
min-height: 92%;
}
.header,.footer{
height: 4%;
width: 100%;
background: darkgray;
text-align: center;
}
for( var i=0 ; i<108;i++ ){
var Li = "我是内容"+i+"
"$(".oUl").append( Li )
}
主要是在内容区设置一个最低高度就可以了
网友评论