解決頁首和頁腳之間的空間填充Div 放置

在從表格佈局到基於div 的佈局的過渡中，出現了一個常見的障礙：確保之間的內聚性和響應式間距頁首、內容和頁腳div。以下是使用 Flexbox 的可靠方法：

Flexbox 解決方案

Flex 佈局使您能夠動態分配空間，允許自然的頁眉和頁腳高度，同時內容無縫填充剩餘區域。這模仿了本機行動應用程式的直覺行為，其中頁首和頁尾會黏附在視窗的頂部和底部邊緣，使內容在主要部分內可滾動。

HTML 和 CSS 實作

以下程式碼示範解決方案：

  

    ...
  
  

    ...
  
  
  

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

透過利用 Flexbox 的靈活性，您可以優雅且響應靈敏地分配網頁內的空間，無論螢幕解析度如何，都能確保最佳的使用者體驗。