CSS 如何将容器 DIV 的高度设置为窗口高度的 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8473162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I set height of container DIV to 100% of window height?
提问by Nick
I have a couple of problems with my container DIV. For one it is not recognising the height of my content correctly (I would have thought it would extend beyond the bottom of the main content and sidebar, but it isn't). You can see what I mean on this page.
我的容器 DIV 有几个问题。一方面，它没有正确识别我的内容的高度（我原以为它会超出主要内容和侧边栏的底部，但事实并非如此）。你可以在这个页面上看到我的意思。
I would also like the container DIV to always fill the available height of the screen/window. I have tried setting it to min-height:100%, but this didn't have any effect.
我还希望容器 DIV 始终填充屏幕/窗口的可用高度。我试过将它设置为min-height:100%，但这没有任何效果。
Here is the CSS I am using for the container DIV:
这是我用于容器 DIV 的 CSS：
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
min-height: 100%;
}
I would be grateful for any help to get this working.
我将不胜感激任何帮助以使其正常工作。
Thanks,
谢谢，
Nick
缺口
回答by ptriek
Add this to your css:
将此添加到您的CSS：
html, body {
height:100%;
}
If you say height:100%, you mean '100% of the parent element'. If the parent element has no specified height, nothing will happen. You only set 100% on body, but you also need to add it to html.
如果你说 height:100%，你的意思是“父元素的 100%”。如果父元素没有指定高度，则什么都不会发生。您只在 body 上设置 100%，但您还需要将其添加到 html。
回答by Nicky Thomas
You can net set it to view height
您可以将其设置为查看高度
html, body
{
height: 100vh;
}
回答by Kyle
Did you set the CSS:
您是否设置了 CSS：
html, body
{
height: 100%;
}
You need this to be able to make the div take up all the space. :)
您需要这样才能使 div 占据所有空间。:)
回答by Blix
html {
min-height: 100%;
}
body {
min-height: 100vh;
}
The html height (%)will take care of the height of the documents that's heightis more than a 100%of the screen viewwhile the body view height (vh)will take care of the document's height that is less than the height of the screen view.
该html height (%)会照顾这就是文件的高度height比多100%的screen view同时body view height (vh)会照顾文档的高度小于屏幕视图的高度。
回答by khaz
I've been thinking over this and experimenting with height of the elements: html, body and div. Finally I came up with the code:
我一直在考虑这个并尝试元素的高度：html、body 和 div。最后我想出了代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height question</title>
<style>
html {height: 50%; border: solid red 3px; }
body {height: 70vh; border: solid green 3px; padding: 12pt; }
div {height: 90vh; border: solid blue 3px; padding: 24pt; }
</style>
</head>
<body>
<div id="container">
<p><html> is red</p>
<p><body> is green</p>
<p><div> is blue</p>
</div>
</body>
</html>With my browser (Firefox 65@mint 64), all three elements are of 1) different height, 2) every one is longer, than the previous (html is 50%, body is 70vh, and div 90vh). I also checked the styles without the height with respect to the html and body tags. Worked fine, too.
使用我的浏览器（Firefox 65@mint 64），所有三个元素都具有 1）不同的高度，2）每个元素都比前一个更长（html 为 50%，body 为 70vh，div 为 90vh）。我还检查了关于 html 和 body 标签的没有高度的样式。工作也很好。
About CSS units: w3schools: CSS units
关于 CSS 单位：w3schools：CSS 单位
A note about the viewport: " Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm."
关于视口的说明：“视口 = 浏览器窗口大小。如果视口宽 50 厘米，则 1vw = 0.5 厘米。”
