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

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

Patricia Arquette

發布： 2024-11-10 03:23:02

原創

284 人瀏覽過

How to Create a Div That Fills the Space Between Header and Footer Using Flexbox?

建立Div 來填滿頁首和頁腳Div 之間的空間

從基於表格的版面轉換到使用div 時，在頁首、內容和頁腳之間保持適當的間距元素可能是一個挑戰。這是使用Flexbox 的有效解決方案：

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

登入後複製

使用此程式碼，body 元素顯示為Flexbox 列，頁首和頁尾為設定為flex:none，表示它們不應該擴展或收縮。包含內容的主元素被設定為 flex: auto，這允許它佔用所有剩餘空間。 Overflow-y 和 -webkit-overflow-scrolling 屬性確保內容可以在主元素內垂直捲動。

這種方法允許動態佈局，根據不同的螢幕解析度進行調整，確保標題和當內容填滿可用空間時，頁腳保持固定。

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