如何僅使用 CSS 使 Div 跨度達到頁面高度的 100%？

如何在不使用JavaScript 的情況下將Div 拉伸到100% 頁面高度

在設計網頁時，通常需要建立一個導覽列或跨越頁面整個高度的其他元素，而不僅僅是視口的可見區域。為了實現這一點，讓我們來探索一個純 CSS 解決方案。

CSS 解決方案：

html {
    min-height: 100%; /* Ensure it's as tall as the viewport */
    position: relative;
}
body {
    height: 100%; /* Force body to match HTML's height */
}
#navigation-bar {
    position: absolute;
    top: 0; /* Top edge of the page */
    bottom: 0; /* Bottom edge of the page */
    left: 0; /* Left edge of the page */
    right: 0; /* Right edge of the page */
}

此CSS 將導航列元素絕對定位在視口內，確保它填充整個頁面高度而不滾動

說明：

• html 將最小高度設定為100% 以符合視窗。這可以防止 div 被剪裁。
• body 將高度設為 100% 以強制其與 HTML 元素的高度匹配。
• position:absolute 從正常文件流中刪除 div，使其能夠定位在viewport。
• top: 0 和 bottom: 0 將 div 擴展到頁面的整個高度。

附加說明：

• 對於全高列，從#navigation-bar 選擇器中刪除left 或left 或right
。
• 對於全寬行，刪除 top或 bottom
。
• 如果 div 不打算用作背景，請刪除z-index: -1;
來自選擇器。

以上是如何僅使用 CSS 使 Div 跨度達到頁面高度的 100%？的詳細內容。更多資訊請關注PHP中文網其他相關文章！