堆棧內存溢出
  簡體   English   中英

如何使瀏覽器 window 的 div 高度為 100%

[英]How to make a div 100% height of the browser window

 原文  2009-10-15 21:18:43  6   38    html/ css/ height

問題描述

我有一個包含兩列的布局 - 左div和右div 。

右側的div具有灰色background-color ，我需要它根據用戶瀏覽器 window 的高度垂直擴展。 現在， background-color在該div中的最后一段內容處結束。

我試過height:100% , min-height:100%; ， ETC。

38 個解決方案

解決方案1
 3124  2013-05-30 13:33:35

有幾個 CSS 3 度量單位稱為：

視口百分比（或視口相對）長度

什么是視口百分比長度？

來自上面鏈接的 W3 候選推薦：

視口百分比長度與初始包含塊的大小有關。 當初始包含塊的高度或寬度發生變化時，它們會相應地縮放。

這些單位是vh （視口高度）、 vw （視口寬度）、 vmin （視口最小長度）和vmax （視口最大長度）。

這如何用於使分隔符填充瀏覽器的高度？

對於這個問題，我們可以使用vh ： 1vh等於視口高度的 1%。 也就是說， 100vh等於瀏覽器窗口的高度，而不管元素在 DOM 樹中的位置：

HTML

<div></div>

CSS

div {
    height: 100vh;
}

這實際上就是所需要的。 這是一個使用中的JSFiddle 示例。

哪些瀏覽器支持這些新單位？

目前，除 Opera Mini 外，所有最新的主要瀏覽器都支持此功能。 查看Can I use...以獲得進一步的支持。

這如何與多列一起使用？

對於手頭的問題，具有左右分隔符，這是一個JSFiddle 示例，顯示了包含vh和vw的兩列布局。

100vh與100%有何不同？

以這個布局為例：

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

這里的p標簽設置為 100% 高度，但是因為它包含的div有 200 像素的高度，所以 200 像素的 100% 變成了 200 像素，而不是body高度的 100%。 100vh意味着無論div高度如何， p標簽都將是body 100% 高度。 看看這個隨附的 JSFiddle可以輕松看出區別！

解決方案2
 595  2011-12-11 13:10:31

如果你想設置<div>或任何元素的高度，你也應該將<body>和<html>的高度設置為 100%。 然后你可以用 100% 設置元素的高度:)

下面是一個例子：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

解決方案3
 302  2009-10-15 21:31:51

如果你能夠絕對定位你的元素，

position: absolute;
top: 0;
bottom: 0;

會做的。

解決方案4
 149  2016-05-04 11:11:58

您可以在 CSS 中使用視口單元：

HTML：

<div id="my-div">Hello World!</div>

CSS：

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

解決方案5
 143  2017-06-03 17:43:42

在這種情況下，您可以使用vh ，它相對於視口高度的1% ...

這意味着如果你想掩蓋高度，只需簡單地使用100vh 。

看看下面我在這里為你畫的圖：

如何使瀏覽器窗口的 div 高度為 100%？

試試我為你創建的片段，如下所示： 

 .left { height: 100vh; width: 50%; background-color: grey; float: left; } .right { height: 100vh; width: 50%; background-color: red; float: right; }
 <div class="left"></div> <div class="right"></div>

解決方案6
 116  2013-06-12 14:14:35

與flex 模型解決方案相比，所有其他解決方案，包括投票最高的具有vh解決方案，都是次優的。

隨着CSS flex 模型的出現，解決 100% 高度問題變得非常非常容易：使用height: 100%; display: flex height: 100%; display: flex在父元素上， flex: 1在子元素上。 它們會自動占用容器中的所有可用空間。

請注意標記和 CSS 是多么簡單。 沒有桌子黑客或任何東西。

所有主要瀏覽器以及 IE11+ 都支持flex 模型。 

 html, body { height: 100%; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; }
 <div class="left">left</div> <div class="right">right</div>

在此處了解有關flex 模型的更多信息。

解決方案7
 56  2009-10-15 23:13:33

你沒有提到一些重要的細節，比如：

  • 布局是固定寬度嗎？
  • 列中的一個或兩個是固定寬度嗎？

這是一種可能性： 

 body, div { margin: 0; border: 0 none; padding: 0; } html, body, #wrapper, #left, #right { height: 100%; min-height: 100%; } #wrapper { margin: 0 auto; overflow: hidden; width: 960px; // width optional } #left { background: yellow; float: left; width: 360px; // width optional but recommended } #right { background: grey; margin-left: 360px; // must agree with previous width }
 <html> <head> <title>Example</title> </head> <body> <div id="wrapper"> <div id="left"> Left </div> <div id="right"></div> </div> </body> </html>

這取決於哪些柱需要固定，哪些是液體，這有很多變化。 您也可以使用絕對定位來做到這一點，但我通常發現使用浮點數會得到更好的結果（尤其是在跨瀏覽器方面）。

解決方案8
 38  2013-07-27 16:18:36

這對我有用： 

 <div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

使用position:fixed而不是position:absolute ，這樣即使向下滾動分區也會擴展到屏幕的末尾。

解決方案9
 31  2013-08-21 16:57:21

這是高度的修復。

在您的 CSS 中使用：

#your-object: height: 100vh;

對於不支持vh-units瀏覽器，請使用 Modernizr。

添加此腳本（添加對vh-units檢測）

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

最后，如果瀏覽器不支持vh-units ，則使用此函數將視口的高度添加到#your-object ：

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

解決方案10
 29  2020-03-12 20:10:16

即使有了這里的所有答案，我還是驚訝地發現沒有一個能真正解決問題。 如果我使用100vh height / min-height ，當內容比頁面長時布局會中斷。 如果我改為使用100% height / min-height ，則當內容小於頁面高度時布局會中斷。

我找到的解決方案解決了這兩種情況，是結合前兩個答案：

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

解決方案11
 27  2013-01-28 11:05:44

試試這個 - 測試：

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

編輯：2020 更新：

您現在可以使用vh ：

#right, #left {
  height: 100vh
}

解決方案12
 27  2017-09-27 14:06:06

100vw = 視口寬度的 100%。

100vh = 視口高度的 100%。

如果要將div寬度或高度設置為瀏覽器窗口大小的 100%，則應使用：

寬度： 100vw

對於高度： 100vh

或者，如果您想將其設置得更小，請使用 CSS calc函數。 例子：

#example {
    width: calc(100vw - 32px)
}

解決方案13
 26  2018-11-18 17:36:29

100%的寬度和高度不同。

當您指定width: 100% ，它意味着“從父元素或窗口的寬度中占用可用寬度的 100%”。

當您指定height: 100% ，它僅表示“占用父元素可用高度的 100%”。 這意味着如果您不在頂層元素指定高度，則所有子元素的高度將為0或父元素的高度，這就是為什么您需要將最頂層元素設置為具有min-height的原因窗戶高度。

我總是指定主體的最小高度為 100vh，這使定位和計算變得容易，

body {
  min-height: 100vh;
}

解決方案14
 17  2021-03-19 12:14:28

一個完整的頁面稱為“視口” ，您可以在 CSS3 中根據其視口設計元素。

這些單位稱為視口百分比長度，與初始包含塊的大小有關。

  • 視口高度稱為vh 。 頁面的完整高度為 100vh。
  • 視口寬度稱為vw 。 頁面的完整高度為 100vw。
  • 還有 vmin（視口最小長度）和 vmax（視口最大長度）。

所以現在，您的問題可以通過將以下內容添加到您的 CSS 中輕松解決：

.classname-for-right-div /*You could also use an ID*/ { 
  height: 100vh;
}

這是有關視口相對長度的信息

解決方案15
 17  2011-12-10 21:34:47

添加min-height: 100%並且不指定高度（或將其設置為自動）。 它完全為我完成了工作：

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

解決方案16
 16  2020-01-08 18:44:19

最簡單的方法是這樣做。 

 div { background: red; height: 100vh; } body { margin: 0px; }
 <div></div>

解決方案17
 13  2013-06-12 14:01:08

這對我有用：

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

取自本頁。

解決方案18
 12  2016-04-14 10:19:46

嘗試在html和body設置height:100%

html, 
body {
    height: 100%;
}

如果你想要 2 div 高度相同的使用或設置父元素display:flex屬性。

解決方案19
 12  2017-01-04 10:43:53

有多種方法可以將<div>的高度設置為 100%。

方法（一）： 

 html, body { height: 100%; min-height: 100%; } .div-left { height: 100%; width: 50%; background: green; } .div-right { height: 100%; width: 50%; background: gray; }
 <div class="div-left"></div> <div class="div-right"></div>

使用 vh 的方法 (B)： 

 html, body { height: 100%; min-height: 100%; } .div-left { height: 100vh; width: 50%; background: green; float: left; } .div-right { height: 100vh; width: 50%; background: gray; float: right; }
 <div class="div-left"></div> <div class="div-right"></div>

方法（c）使用彈性盒： 

 html, body { height: 100%; min-height: 100%; } .wrapper { height: 100%; min-height: 100%; display: flex; } .div-left { width: 50%; background: green; } .div-right { width: 50%; background: gray; }
 <div class="wrapper"> <div class="div-left"></div> <div class="div-right"></div> </div>

解決方案20
 9  2017-06-12 14:52:41

以下內容與您在之前的答案中的內容不完全相同，但可能對某些人有所幫助：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

解決方案21
 9  2017-10-03 13:46:23

默認情況下，塊元素占用其父元素的全部寬度。

這就是他們如何滿足他們的設計要求，即垂直堆疊。

9.4.1 塊格式化上下文

在塊格式化上下文中，框從包含塊的頂部開始一個接一個地垂直排列。

但是，這種行為不會擴展到高度。

默認情況下，大多數元素是其內容的高度（ height: auto ）。

與寬度不同，如果需要額外的空間，則需要指定高度。

因此，請記住以下兩點：

  • 除非你想要全寬，否則你需要定義塊元素的寬度
  • 除非你想要內容高度，否則你需要定義一個元素的高度

 .Contact { display: flex; /* full width by default */ min-height: 100vh; /* use full height of viewport, at a minimum */ } .left { flex: 0 0 60%; background-color: tomato; } .right { flex: 1; background-color: pink; } body { margin: 0; } /* remove default margins */
 <div class="Contact"> <section class="left"> <div class=""> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1> </div> </section> <section class="right"> <img /> </section> </div>

解決方案22
 8  2016-01-25 17:36:46

選項之一是使用 CSS 表。 它有很好的瀏覽器支持，甚至可以在 Internet Explorer 8 中運行。

JSFiddle 示例

 html, body { height: 100%; margin: 0; } .container { display: table; width: 100%; height: 100%; } .left, .right { display: table-cell; width: 50%; } .right { background: grey; }
 <div class="container"> <div class="left"></div> <div class="right"></div> </div>

解決方案23
 8  2018-03-10 00:52:28

只需使用“vh”單位而不是“px”，即視口高度。

height: 100vh;

解決方案24
 8  2019-12-03 11:21:04

試試這個一次... 

 *{ padding:0; margin:0; } .parent_div{ overflow:hidden; clear:both; color:#fff; text-align:center; } .left_div { float: left; height: 100vh; width: 50%; background-color: blue; } .right_div { float: right; height: 100vh; width: 50%; background-color: green; }
 <div class=" parent_div"> <div class="left_div">Left</div> <div class="right_div">Right</div> </div>

解決方案25
 7  2015-05-06 21:16:03

使用 FlexBox CSS

Flexbox 非常適合解決此類問題。 雖然以水平方向布局內容而聞名，但 Flexbox 實際上同樣適用於垂直布局問題。 您所要做的就是將垂直部分包裹在一個 flex 容器中，然后選擇要擴展的部分。 它們會自動占用容器中的所有可用空間。

解決方案26
 6  2015-10-16 10:28:50

您需要做兩件事，一是將高度設置為您已經設置的 100%。 其次是將位置設置為絕對。 這應該夠了吧。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

來源

解決方案27
 6  2017-10-29 06:55:14

您可以使用display: flex和height: 100vh 

 html, body { height: 100%; margin: 0px; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; }
 <div class="left">left</div> <div class="right">right</div>

解決方案28
 6  2018-04-30 11:02:18

 .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100vh; // Height window (vh) } .wrapper .left{ width: 80%; // Width optional, but recommended } .wrapper .right{ width: 20%; // Width optional, but recommended background-color: #dd1f26; }
 <!-- vw: hundredths of the viewport width. vh: hundredths of the viewport height. vmin: hundredths of whichever is smaller, the viewport width or height. vmax: hundredths of whichever is larger, the viewport width or height. --> <div class="wrapper"> <div class="left"> Left </div> <div class="right"> Right </div> </div>

解決方案29
 6  2018-08-22 10:48:35

實際上，對我來說最有效的是使用vh屬性。

在我的 React 應用程序中，即使調整大小，我也希望 div 與頁面高度匹配。 我試過height: 100%; ， overflow-y: auto; ，但在設置height:(your percent)vh;時它們都height:(your percent)vh; 它按預期工作。

注意：如果您使用填充、圓角等，請確保從vh屬性百分比中減去這些值，否則會增加額外的高度並顯示滾動條。 這是我的示例：

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

解決方案30
 5  2017-04-18 05:56:50

嘗試以下 CSS：

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

解決方案31
 5  2021-08-16 06:34:01

現在使用高度：100vh； 對於固定窗口高度

<style>
 .header-top{height:100vh; background:#000; color:#fff;display:flex;align-items:center;padding:10px; justify-content: space-around;}
 .header-top ul{list-style:none;padding:0; margin:0;display:flex;align-items:center;  }
 .header-top ul li{padding:0px 10px;}
</style>
   <div class="header-top">
       <div class="logo">Hello</div>
       <ul>
          <li>Menu</li>
          <li>About Us</li>
         <li>Contact US</li>
         <li>Login</li>
     </ul>
  </div>

解決方案32
 2  2013-09-12 09:41:58

如果使用position: absolute; 和jQuery，您可以使用 

$("#mydiv").css("height", $(document).height() + "px");

解決方案33
 2  2018-05-22 05:02:30

我有兩列的布局-左div和右div 。

右邊的div具有灰色的background-color ，我需要根據用戶瀏覽器窗口的高度將其垂直擴展。 現在， background-color在該div中的最后一條內容處結束。

我已經嘗試過height:100% ， min-height:100%; ， 等等。

解決方案34
 1  2014-04-18 19:37:14

最簡單的： 

 html, body { height: 100%; min-height: 100%; } body { position: relative; background: purple; margin: 0; padding: 0; } .fullheight { display: block; position: relative; background: red; height: 100%; width: 300px; } 
 <html class=""> <body> <div class="fullheight"> This is full height. </div> </body> </html>

解決方案35
 0  2013-04-30 14:14:03

盡管此解決方案是使用jQuery I完成的，但對於任何適合列大小以適合屏幕尺寸的人來說，它可能都是有用的。

對於從頁面頂部開始的列，此解決方案是最簡單的。 

body,html{
  height:100%;
}

div#right{
  height:100%
}

對於不在頁面頂部開始的列（例如：如果它們在標題下方開始）。 

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

第一種方法將主體高度也應用於主體和各列，這意味着height100% + height100% 。

第二種方法是通過獲取正文的高度來獲取顯示給用戶的頁面的高度，然后減去標題大小以知道還剩下多少高度才能顯示該列。

解決方案36
 0  2018-09-07 20:08:10

您可以使用以下CSS將div設置為瀏覽器窗口高度的100％： 

display: block;
position: relative;
bottom: 0;
height: 100%;

解決方案37
 0  2022-02-03 12:34:08

如果您將 html 和正文高度設置為 100%，那么它將覆蓋整個頁面，如果您將任何特定的 div 最小高度設置為 100%，那么它將覆蓋整個窗口，如下所示：

CSS<\/strong>

html,body{
 height:100%;
}

div#some-div{
min-height:100%;

}

解決方案38
 -1  2020-02-24 02:30:06

非常簡單的解決方案，支持跨域，還支持瀏覽器調整大小。

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根據需要調整iframe height屬性（將div height屬性保留為 100vh）。

為什么是 80%？ 在我的實際場景中，我在div內有一個標題，在iframe之前，它占用了一些垂直空間 - 所以我將iframe設置為使用 80% 而不是 100% （否則它將是包含div的高度，但是在標題之后開始，並溢出div的底部）。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使div占用瀏覽器窗口高度的100％ 使用CSS將Div元素設置為瀏覽器窗口的100％高度 如何使兩個div 100％高度的瀏覽器窗口右上角和左上角 如何使div達到瀏覽器窗口高度的100％，但具有頂部和底部邊距？ 如何讓 div 在瀏覽器中占據 100% 的視口高度 如何制作100％窗口高度的div？ 使身體100％高度的瀏覽器窗口 使CSS Div 100％頁面高度（非窗口） 如何使div 100％高 使 div 為瀏覽器窗口的 100% 寬度
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM