在网页布局中有时会遇到头部和尾部高度固定，而中间部分随视窗高度变化而变化的三栏布局需求，经过我的实验，有两张方法可以实现：
1.使用传统的绝对定位布局
body{
padding: 0;
margin: 0;
}
.header{
height:100px;
}
.footer{
height:100px
}
.content{
positon:absolute;
top:100px;
bottom:100px;
}
当content中有内容的时候，content就会被自动撑开；
2.使用flex布局
关键地方就在于footer部分的高度要用min-height来设置
body{
padding: 0;
margin: 0;
display:flex;
flex-direction:column;
height:100vh;
}
.header{
heigth:100px;
flex:0 1;
}
.content{
flex:1 0
}
.footer{
min-height: 40px;
flex:0 1;
}
