如何使用 Flexbox 建立填滿頁首和頁尾之間空間的 DIV？
- Linda Hamilton原創
- 2024-11-08 12:45:02605瀏覽
建立一個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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn