该布局是底部定位在最下面,当内容小于屏幕的高度,整个内容也占整个屏幕;当大于屏幕的高度,则可以滚动。而底部则始终在最底部
<div class="container">
<div class="content-view">
<div class="content">这是内容</div>
</div>
<footer>底部定位</footer>
</div>
.container{//总容器为全屏,所以高度为100%
positon: fiexd;
top:0;
left:0;
height:100%;
overflow: auto;//如果内容太长,会显示滚动条查看其余内容。
}
.content-view{
min-height: 100%;//如果内容不够长时,也保证内容有全屏长度
}
.content{
margin-top: 50px;//向上和屏幕顶部保持50px间距
padding-bottom: 50px;//保证内容content区域的底部有50px的空白
}
footer{
margin: -64px;//让关闭按钮向content-wrapper里面伸入50px,正好把内容区的50px空白补上;
}