如何使用 Flexbox 在固定頁首和頁尾之間建立流體內容 DIV？
- Patricia Arquette原創
- 2024-11-08 08:17:01311瀏覽
在頁眉和頁腳之間創建流暢的內容DIV
在追求現代佈局設計的過程中，您已經從表格轉向了div。面對對齊頁首、頁尾和內容 div 的挑戰，您尋求一種能夠滿足不同螢幕解析度的優雅解決方案。
考慮 Flexbox 方法，它為這種佈局困境提供了強大的解決方案。透過利用 Flexbox 的固有功能，您可以實現所需的結果：黏性頁首和頁腳元素以及內容區域，無縫填充剩餘空間並允許在其邊界內平滑滾動。
Flexbox 實作
實作Flexbox 很簡單，需要一些HTML 與CSS 調整：
HTML:
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
HTML:
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;
}
CSS:此設定將頁眉和頁腳元素鎖定在指定的大小內，同時允許內容區域動態擴展以填充剩餘的垂直空間。 Overflow-y 和 -webkit-overflow-scrolling 屬性確保任何超出內容區域高度的內容都會在其範圍內平滑捲動。 擁抱 Flexbox 強大功能的靈活性和多功能性，輕鬆創建無縫適應的和諧佈局不同的螢幕解析度。 以上是如何使用 Flexbox 在固定頁首和頁尾之間建立流體內容 DIV？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn