flex布局時，內容區域自適應高度

頁面元素高度固定，中間的元素需要撐滿屏幕，或者內容多時顯示滾動條時，我們要把父元素設置為height:100vh

<div class="parent">
  <div class="header">

  </div>
  <div class="content">

  </div>
  <div class="footer">
    
  </div>
</div>

　　

.parent{
  display: flex;
  height: 100vh;
}
.header{
  height: 100px;
}
.content{
  flex: 1;
}
.footer{
  height: 100px;
}