頭尾固定の三欄レイアウトテクニック

ページレイアウトでは、頭と尾の高さが固定されている場合がありますが、中間部分が窓の高さによって変化する3つの欄のレイアウトのニーズは、私の実験を経て、2つの方法で実現できます.
1.従来の絶対配置レイアウトを使用する

body{
    padding: 0;
    margin: 0;
  }
.header{
    height:100px;
}
.footer{
    height:100px
}
.content{
    positon:absolute;
    top:100px;
    bottom:100px;
}

コンテンツにコンテンツがある場合、コンテンツは自動的に開かれます.
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;
  }