如何讓 div 在瀏覽器中占據 100% 的視口高度
[英]How to make div occupy 100% of viewport height in browser
問題描述
我有一個 div 標簽，我意識到它沒有按應有的方式填充 100% 的高度。
我的代碼：
#container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } <div id="container"></div>
<div id="container"></div>
發生了什么？
好吧，如果我只有上面的這段代碼，我當然會把 div 占據 100% 的視口！ 問題是我的頁面不僅有這段代碼，我還有更多的東西，我在body標簽里面插入了這段代碼，body標簽里面的某個“地方”，也就是我插入了一些元素，並且這些元素有這個div之后，但是不占，100%的視口觀察是怎么回事
結果在您的頁面上視覺效果如何？
我滾動了頁面，但我的 div 仍然占據了整個視口的 100%。 我不正確嗎？ 如果這應該發生，為什么沒有發生？
解釋：各位，我發現了問題，但是不知道怎么解決，好吧，事情是這樣的，當它有一個低於容器div或高於容器的元素時，div不會占據100％的視口，看看這個圖像並查看：
我使用的代碼實現了這一點：
我的代碼 HTML：
body { color: red; background: green; margin: 0; padding: 0; } #container { width: 100vw; height: 100vh; z-index: 1; background: purple; } p { font-size: 20pt; }
<div id="container"></div> <p>ksksks</p>
上圖中發生的問題與我的頁面上發生的問題相同，即如果頁面上沒有元素，div 只會填充視口高度的 100%，我希望能夠使高度為 100%即使在頁面上有元素的視口。
編輯：
好吧，顯然我看到有很多答案，其中大多數都不起作用，或者正在解釋錯誤或提供無法解決問題的答案，其他人建議使用 position fixed 這實際上解決了問題，但是我不想這樣做，認為你有一個聊天，因為你希望它有一個滾動的項目符號，它將占據整個視口而不是另一個 div 理解？ 這個解決方案實際上解決了問題，但我不喜歡 jerry-rig。
我想知道一種更優雅的方法，例如我的 div 容器占據了 100% 的視口，但我不希望其他元素出現，我希望 div 容器與任何應該出現的元素重疊，我不不想滾動頁面。
概括：
一言以蔽之，div要占據100%的視口，並確保body沒有滾動，頁面到頂部，即不管用戶在哪個頁面position , I want the page to go to the top and disable the scroll, and without javascript preferably, I don't want to write too much javascript being possible to write in html and css:) I will take advantage of the reward in this answer添加此內容並尋求解決此問題的方法。
8 個解決方案
解決方案1
4 2021-04-09 22:07:27
問題與vh和vw單位沒有考慮（添加的）滾動條寬度/高度的事實有關。 只要頁面不高於視口，就不會出現滾動條，並且 100vh 將恰好是視口的高度，並且一切都按預期工作。
但是只要下面或上面有更多內容，就會出現垂直滾動條： 現在width: 100vw比window 寬度減去垂直滾動條寬，所以出現水平滾動條，現在height: 100vh比 window 高高度減去（水平）滾動條。
我認為這是一種錯誤，但事實就是如此——在大多數瀏覽器中，似乎如此。 我很久以前發布了這個問題，它基本上涵蓋了相同的問題： Problem using vw units when a vertical scrollbar appears (full-width elements in WordPress)
評論后添加/編輯：
我想說，沒有 100% 安全的解決方案。 但是在某種程度上有幫助的一件事是不要使用100vw作為width ，而是使用100% ，這確實考慮了（垂直）滾動條。 但是， width: 100%; 無論如何，它是任何塊元素的默認值，因此您可以簡單地刪除width設置並僅使用height: 100vh ，只要您沒有任何特殊的寬度要求，它將起作用（即具有確切的視口高度）。
解決方案2
1 2021-04-13 14:19:59
請在您的 head 標簽內使用以下元標簽
<meta name="viewport" content="width=device-width, initial-scale=1">
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { color: red; background: green; margin: 0; padding: 0; } #container { width: 100vw; height: 100vh; z-index: 1; background: purple; } p { font-size: 20pt; } </style> </head> <body> <div id="container"></div> <p>ksksks</p> </body> </html>
解決方案3
1 2021-04-17 09:25:01
根據您的問題，您希望 div 占用空間而不是紫色背景，對嗎？
Css：
#container {
width: 100vw;
height: 100%;
background: purple;
}
body {
margin: 0px;
}
#innerDiv {
height: 100vw;
background-color: red;
width: 100vw;
}
#innerDiv1 {
height: 100%;
background-color: blue;
width: 100vw;
}
Html：
<div id="container">
</div>
<div id="innerDiv">Div #1</div>
<div id="innerDiv1">Div #2</div>
解決方案4
1 2021-04-17 09:39:14
您將背景紫色應用到 100vh 的高度，如果您想完全看到紫色，您只需在 body 標記中添加紫色而不是綠色，否則您希望將 div 放在容器中。這沒有問題。您只想調整您的代碼
body { color: red; background: purple; margin: 0; padding: 0; } #container { width: 100vw; height: 100vh; z-index: 1; } p { font-size: 20pt; }
<div id="container"></div> <p>ksksks</p>
解決方案5
1 2021-04-17 15:58:00
最簡單的解決方案是利用viewport height(vh)和viewport width(vw)單位來設置塊的高度和寬度。 此塊/div 將填滿瀏覽器 window 中的整個空間。 這是一個例子。
div.container {
height: 100vh;
width: 100vw;
}
確保您在<head>中具有給定的視口元標記
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這為瀏覽器提供了有關如何控制頁面尺寸和縮放的說明。 width=device-width部分設置頁面的寬度以跟隨設備的screen-width （這將因設備而異）。 initial-scale=1.0部分設置瀏覽器首次加載頁面時的初始縮放級別。 如果缺少元標記，初始縮放和縮放可能會出現異常。 還將您的<p>放入容器 div 中。 這是工作演示。
我的代碼：
HTML, body { margin: 0; padding: 0; } #container { width: 100vw; height: 100vh; background: purple; } p { height: 100%; width: 100%; background-color: rgba(255,255,255, .8); } <div id="container"></div>
<div id="container"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div>
解決方案6
1 2021-04-18 05:07:00
這只是一種解決方法，我通常將其用作全屏移動漢堡菜單。 您必須小心，因為它會強制覆蓋整個頁面，如果頁面上已經存在任何其他元素，它將隱藏所有元素。
.container {
# it make the container always on the page regardless any element or window margin
position: fixed;
top: 0;
left: 0;
z-index: 999;
height: 100vh;
width: 100vw;
}
解決方案7
1 2021-04-19 01:14:38
我已經使用這些代碼進行了嘗試，它似乎可以正常工作，您可以檢查它們：
body { color: red; background: green; margin: 0; padding: 0; } #container { width: 100vw; height: 100vh; z-index: 1; background: purple; } p { font-size: 20pt; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="container"></div> <p>ksksks</p> </body> </html>
解決方案8
0 2021-04-13 13:45:56
似乎沒有什么問題。
#container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } #innerDiv { height: 100px; background-color: red; width: 100vw; } #innerDiv1 { height: 100px; background-color: blue; width: 100vw; }
<div id="container"> </div> <div id="innerDiv">Div #1</div> <div id="innerDiv1">Div #2</div>
Twitter-Bootstrap4：讓DIV占據高度（100％-導航欄）
[英]Twitter-Bootstrap4: Make a DIV occupy height (100% - navbar)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.