上下固定中间自适应布局
实现上下固定中间自适应布局
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>