实现上下固定中间自适应布局
1.通过position：absolute实现
定义如下结构
<body>
<div class="container">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>
</body>
style实现如下：
<style>
body,
html {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0;
padding: 0;
}
.container {
height: 100%;
}
.top,
.bottom {
width: 100%;
height: 100px;
background-color: red;
}
.bottom {
background-color: green;
}
.center {
position: absolute;
width: 100%;
/* height: 100%; */
/* margin-bottom: 100px; */
top: 100px;
bottom: 100px;
background-color: aqua;
}
</style>2.通过flex布局实现，父布局高度100%，display:flex;flex-direction: column;设置纵向排列，中间设置flex:1；具体实现如下：
<style>
body,
html {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0;
padding: 0;
}
.container {
height: 100%;
/* display: flex;
flex-direction: column;
width: 100%; */
}
.top,
.bottom {
width: 100%;
height: 100px;
background-color: red;
}
.bottom {
background-color: green;
}
.center {
position: relative;
width: 100%;
/* flex: 1; */
height: 100%;
/* margin-bottom: 100px; */
/* top: 100px; */
background-color: aqua;
}
</style>
