在網頁布局中有時會遇到頭部和尾部高度固定，而中間部分隨視窗高度變化而變化的三欄布局需求，經過我的實驗，有兩張方法可以實現：

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