如何使用 Flexbox 以 Div 填滿頁首和頁尾之間的空間？
用Div 填滿頁眉和頁腳之間的空間
從表格過渡到div 進行佈局時，常見的挑戰是在保持所需排列的同時適應動態內容高度。以下介紹如何建立一個 div 來填滿固定頁首和頁尾之間的整個空間。
Flexbox 解決方案
Flex 佈局為此情況提供了一個優雅的解決方案，允許容器元素（頁眉和頁腳） ）以保持其固定高度，同時使內容區域能夠自動調整。此設定類似於行動應用程式的預設行為。
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 div 成為一個Flex 容器，其子元素（頁眉、主元素和頁腳）成為彈性項目。 flex-direction 屬性指定 Flex 項目的方向，在本例中為垂直方向（列）。
頁首和頁尾元素設定為 flex: none，這表示它們不會相對於它們的初始尺寸，確保它們保持固定的高度。另一方面，主元素設定為 flex: auto，表示它應該填充剩餘空間。
此外，overflow-y:scroll 應用於主元素，以在滾動時引入垂直滾動。內容超出了可用空間。 -webkit-overflow-scrolling: touch 屬性改進了 iOS 裝置上的滾動行為。
此設定有效地創建了靈活且動態的佈局，其中頁眉和頁腳保持固定在各自的頂部和底部位置，而內容div 無縫填充它們之間的空間，適應不同的螢幕高度。
以上是如何使用 Flexbox 以 Div 填滿頁首和頁尾之間的空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器
Apr 11, 2025 am 11:29 AM
您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
如何通過CSS選擇第一個類名為item的子元素？
Apr 05, 2025 pm 11:24 PM
在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時，常常會遇到元素個數不�...
為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？
Apr 05, 2025 pm 05:51 PM
關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時，你可能會遇到一些令人困惑的現象，比如在開發者工具（d...
我們如何創建一個在SVG中生成格子呢模式的靜態站點
Apr 09, 2025 am 11:29 AM
格子呢是一塊圖案布，通常與蘇格蘭有關，尤其是他們時尚的蘇格蘭語。在Tartanify.com上，我們收集了5,000多個格子呢
