css中如何实现上下自适应,css实现上下固定中间自适应布局

html：

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：

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;

}

注意：

里边一定要有内容，因为display: table-row;相当于

转换为了标签，所以tr标签里是需要有内容的

参考：