如何使用 Flexbox 以 Div 填滿頁首和頁尾之間的空間？

用Div 填滿頁眉和頁腳之間的空間

從表格過渡到div 進行佈局時，常見的挑戰是在保持所需排列的同時適應動態內容高度。以下介紹如何建立一個 div 來填滿固定頁首和頁尾之間的整個空間。

Flexbox 解決方案

Flex 佈局為此情況提供了一個優雅的解決方案，允許容器元素（頁眉和頁腳） ）以保持其固定高度，同時使內容區域能夠自動調整。此設定類似於行動應用程式的預設行為。

HTML

  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
  

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

在此設定中，body div 成為一個Flex 容器，其子元素（頁眉、主元素和頁腳）成為彈性項目。 flex-direction 屬性指定 Flex 項目的方向，在本例中為垂直方向（列）。

頁首和頁尾元素設定為 flex: none，這表示它們不會相對於它們的初始尺寸，確保它們保持固定的高度。另一方面，主元素設定為 flex: auto，表示它應該填充剩餘空間。

此外，overflow-y:scroll 應用於主元素，以在滾動時引入垂直滾動。內容超出了可用空間。 -webkit-overflow-scrolling: touch 屬性改進了 iOS 裝置上的滾動行為。

此設定有效地創建了靈活且動態的佈局，其中頁眉和頁腳保持固定在各自的頂部和底部位置，而內容div 無縫填充它們之間的空間，適應不同的螢幕高度。

以上是如何使用 Flexbox 以 Div 填滿頁首和頁尾之間的空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！