页面布局内容不足一屏时候固定内容底部(在页面底部),超出一屏时候在页面内容底部
实现:
1、结构
<div class="detail">
<div class="detail-wrapper">
<div class="detail-main">
内容区域
</div>
</div>
<div class="detail-close">x</div>
</div>
2、样式
.detail{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
background:rgba(7,17,27,0.8);
color:#ffffff;
text-align:center;
}
.detail-wrapper{min-height:100%;} /*主要,让一个内容的父层最小撑满屏幕高度*/
.detail-main{padding-bottom: 64px;}/*主要,然后给内容区域留一个空白的正好要固定的底部的高度*/
.detail-close{margin-top:-64px;}/*主要,向上移动改固定层==上面内容的留白高度*/
3.效果