上下宽高固定，中间自适应的几种布局方式，
有4种布局方式： position; flex; table; grid。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下固定，中间自适应</title>
</head>
<style type="text/css">
html * {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.layout {
200px;
margin-right: 20px;
display: inline-block;
overflow: hidden;
height: 100%;
}
.layout .container div {
200px;
}
</style>
<body>
<!-- 定位 -->
<section class="layout position">
<style type="text/css">
.layout.position .container>div {
position: absolute;
}
.layout.position .top {
top: 0;
height: 100px;
background-color: pink;
}
.layout.position .middle {
top: 100px;
bottom: 100px;
background-color: skyblue;
}
.layout.position .bottom {
height: 100px;
bottom: 0px;
background-color: deeppink;
}
</style>
<article class="container">
<div class="top">pistion上</div>
<div class="middle">pistion中</div>
<div class="bottom">pistion下</div>
</article>
</section>
<!-- flex 注意 html和body的高度都要设置成100%-->
<section class="layout flexbox">
<style type="text/css">
.layout.flexbox {
height: 100%;
}
.layout.flexbox .container {
200px;
display: flex;
height: 100%;
flex-direction: column;
}
.layout.flexbox .top {
height: 100px;
background-color: pink;
}
.layout.flexbox .middle {
flex: 1;
background-color: #87CEEB;
overflow: auto;
}
.layout.flexbox .bottom {
height: 100px;
background-color: hotpink;
}
</style>
<article class="container">
<div class="top">flexbox上</div>
<div class="middle">flexbox中</div>
<div class="bottom">flexbox下</div>
</article>
</section>
<!-- 表格布局 -->
<section class="layout table">
<style type="text/css">
.layout.table{
height: 100%;
}
.layout.table .container{
height: 100%;
display: table;
200px;
}
.layout.table .container>div{
display: table-row;
}
.layout.table .top {
height: 100px;
background-color: pink;
}
.layout.table .middle {
background-color: #87CEEB;
}
.layout.table .bottom {
height: 100px;
background-color: hotpink;
}
</style>
<article class="container">
<div class="top">table上</div>
<div class="middle">table中</div>
<div class="bottom">table下</div>
</article>
</section>
<!-- 网格布局 -->
<section class="layout grid">
<style type="text/css">
.layout.grid{
height: 100%;
}
.layout.grid .container{
height: 100%;
display: grid;
200px;
grid-template-columns:100px;
grid-template-rows:100px auto 100px;
}
.layout.grid .top {
background-color: pink;
}
.layout.grid .middle {
background-color: #87CEEB;
}
.layout.grid .bottom {
background-color: hotpink;
}
</style>
<article class="container">
<div class="top">grid上</div>
<div class="middle">grid中</div>
<div class="bottom">grid下</div>
</article>
</section>
</body>
</html>