css实现上下固定中间自适应布局
2017-10-11 本文已影响0人
divine_zhouo
html：
<div class="top-center-bottom">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>
1：使用定位实现：
css：
.top-center-bottom>div{
position:absolute;
}
.top-center-bottom .top{
top:0;
height:100px;
width:100%;
background:red;
}
.top-center-bottom .bottom{
bottom:0;
height:100px;
width:100%;
background:red;
}
.top-center-bottom .center{
bottom:100px;
top:100px;
width:100%;
background:green;
}
2：使用flexbox：
css：
html, body, .top-center-bottom{
height:100%;
}
.top-center-bottom{
display:flex;
flex-direction:column;
}
.top-center-bottom .top{
height:100px;
background:red;
}
.top-center-bottom .bottom{
height:100px;
background:red;
}
.top-center-bottom .center{
flex:1;
background:green;
}
3：使用grid
css：
.html, body, .top-center-bottom{
width:100%;
height:100%;
}
.top-center-bottom{
display:grid;
grid-template-rows:100px auto 100px;
grid-template-columns:100%
}
.top-center-top{
background:red;
}
top-center-bottom{
background:red;
}
top-center-center{
background:green;
}
4：使用css table布局
html：
<div class="top-center-bottom">
<div class="top"><div></div></div>
<div class="center"><div></div></div>
<div class="bottom"><div></div></div>
</div>
css：
html,body, .top-center-bottom{
height:100%;
width: 100%;
}
.top-center-bottom{
display:table;
}
.top-center-bottom>div{
display: table-row;
}
.top-center-bottom .top{
height: 100px;
background: red;
}
.top-center-bottom .bottom{
height: 100px;
background: red;
}
.top-center-bottom .center{
background: green;
}
注意：
<div class="top">里边一定要有内容，因为display: table-row;相当于<div class="top">转换为了<tr>标签，所以tr标签里是需要有内容的
参考：
