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