如何在沒有 JavaScript 的情況下將 CSS Div 拉伸到 100% 頁面高度？-css教學-PHP中文網

如何在沒有 JavaScript 的情況下將 CSS Div 拉伸到 100% 頁面高度？

Linda Hamilton

發布： 2024-10-31 06:32:30

原創

159 人瀏覽過

How to Stretch a CSS Div to 100% Page Height Without JavaScript?

在沒有JavaScript 的情況下將CSS Div 拉伸到100% 頁面高度

增強網站的使用者體驗涉及確保頁面元素預期運行。常見的要求是讓導覽列或其他元素垂直拉伸以填滿整個頁面高度，無論視窗大小或滾動如何。雖然 JavaScript 可以實現這一點，但純 HTML/CSS 解決方案具有靈活性和易於實施等優勢。

解決方案：

在嘗試了各種方法後，以下是CSS 和HTML 結構成為將DIV 拉伸到100% 頁面高度的最佳解決方案：

<code class="css">/* Ensure the HTML element stretches to the full page height */
html {
    min-height: 100%;
    position: relative;
}

/* Force the body element to match the HTML element's height */
body {
    height: 100%;
}

/* Position the DIV container absolutely and stretch it to all sides */
#cloud-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1; /* Only applies to background elements */
}</code>

登入後複製

<code class="html"><!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html></code>

登入後複製

說明：

html 元素已製作測量和相對定位的參考，這可以防止其子元素從其佈局中刪除。 body 元素的高度設定為 100%，確保它與 html 元素的高度相符。

#cloud-container DIV 的絕對定位，結合其上/下/左/右設定為 0，確保它佔據了整個可用空間。 Overflow:hidden 屬性可防止內容溢出容器。

基本原理：

將#cloud-container DIV 定位為html 元素的子元素並使用html 元素上的position:relative 屬性，即使內容比視口長，也能保證佔據頁面的整個高度。這種方法非常強大，並且廣泛地相容於不同的瀏覽器。

以上是如何在沒有 JavaScript 的情況下將 CSS Div 拉伸到 100% 頁面高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何在沒有 JavaScript 的情況下將 CSS Div 拉伸到 100% 頁面高度？