两栏布局（两种方式实现）
弹性盒子实现垂直方向上头部与底部固定，中间随着浏览器变化而变化的布局。
弹性盒子实现代码
（样式部分）
.box{
display:flex;
flex-direction:column;/*主轴为垂直轴*/
}
header{
height: 100px;
background: red;
}
main{
background: pink;
flex:1;
}
footer{
height: 100px;
background: red;
}
（body部分）
<!--固定两栏布局-->
<div class="box">
<header>头部内容</header>
<main>中间内容</main>
<footer>底部内容</footer>
</div>
定位方式实现
（样式部分）
.box1{
height: 100px;
background: red;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.box2{
box-sizing:border-box;
background: orange;
width:100%;
height:100%;
padding:100px 0px;
}
.box3{
height: 100px;
background: red;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
（body部分）
<body>
<!--定位方式实现固定两栏布局-->
<div class="box1">头部</div>
<div class="box2">中间</div>
<div class="box3">底部</div>
</body>