头尾固定的三栏布局技巧

在网页布局中有时会遇到头部和尾部高度固定，而中间部分随视窗高度变化而变化的三栏布局需求，经过我的实验，有两张方法可以实现：

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;
  }