如何使用 Flexbox 建立填滿頁首和頁尾之間空間的 DIV？-css教學-PHP中文網

如何使用 Flexbox 建立填滿頁首和頁尾之間空間的 DIV？

Linda Hamilton

發布： 2024-11-08 12:45:02

原創

729 人瀏覽過

How can I use Flexbox to create a DIV that fills the space between a header and footer?

建立一個DIV 來填滿頁首和頁腳DIV 之間的空間

設計網站版面時，通常需要有一個頁眉，頁腳和內容區域無縫流動。為此，與傳統表格相比，DIV 提供了更大的靈活性。

為了確保頁腳保持在頁面底部，並且內容DIV 動態調整以填充頁眉和頁腳之間的空間，一個簡單的解決方案是

Flexbox 實現

Flexbox 提供了一種在頁面上排列元素的方法，允許它們在行和列中流動。在我們的例子中，我們希望佈局在列中流動，頁首和頁腳會黏在各自的頂部和底部位置。

HTML 結構保持簡單，包含頁眉、主要內容和頁腳：

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

登入後複製

然後可以如下應用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;
}

登入後複製

說明

flex-direction: 列設定flexbox垂直排列其子項。
flex：頁首和頁尾上沒有任何內容可以阻止它們佔用任何多餘的空間。
overflow-y：捲動允許在主要內容區域內垂直捲動，確保頁面內容適合剩餘空間。
-webkit-overflow-scrolling：觸控優化觸控裝置的捲動行為。
flex：自動允許主要內容區域動態填滿剩餘空間頁首和頁尾之間的空間，無論螢幕解析度為何。

其他注意事項

如果內容超出可用空間，垂直捲軸將出現在主要內容區域。

透過利用 Flexbox，您可以輕鬆創建一個佈局，其中內容會動態適應以填充固定頁眉和頁腳之間的空間，從而產生響應靈敏且具有視覺吸引力的設計。

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