如何設定內容Div 佔據正文高度的100%（不包括固定高度的頁眉和頁腳）
CSS 允許您定義精確的以及網頁的多功能版面。一個常見的挑戰是將內容區域設定為佔據頁面的整個高度，同時排除頁首和頁尾等固定高度元素所佔用的空間。本指南提供了使用純 CSS 的全面解決方案，該解決方案相容於所有現代瀏覽器。
HTML 結構包含頁首、內容 div 和頁尾。在 CSS 中，我們首先確保 html 和 body 元素的最小高度為 100%，並且沒有邊距或填滿。
<code class="css">html, body {
min-height: 100%;
padding: 0;
margin: 0;
}</code>為了定位內容區域，我們引入了一個跨越 #wrapper div使用絕對定位的整個視口。
<code class="css">#wrapper {
padding: 50px 0; /* Adjust to match header and footer heights */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}</code>在#wrapper 內部，我們定義最小高度為100% 的內容div (#content)。這可確保它填滿整個可用空間。
<code class="css">#content {
min-height: 100%;
}</code>為了考慮頁眉和頁腳高度，我們使用負邊距來抵消它們。
<code class="css">header {
margin-top: -50px; /* Adjust to match header height */
height: 50px;
}
footer {
margin-bottom: -50px; /* Adjust to match footer height */
height: 50px;
}</code>這個方法可確保content div 在頁眉和頁腳固定高度後佔據了剩餘的空間，從而形成無縫且動態的佈局，適應不同的螢幕尺寸和裝置方向。
以上是如何讓內容 Div 填滿正文高度的 100%（不包括固定頁首和頁尾）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
