[英]how do I set height of container DIV to 100% of window height?
我的容器DIV有几个问题。 对于一个它没有正确识别我的内容的高度（我会认为它将超出主要内容和侧边栏的底部，但它不是）。 你可以在这个页面上看到我的意思。
我还希望容器DIV始终填充屏幕/窗口的可用高度。 我已经尝试将它设置为min-height:100% ，但这没有任何效果。
这是我用于容器DIV的CSS：
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
min-height: 100%;
}
如果有任何帮助，我将不胜感激。
谢谢，
缺口
将此添加到您的CSS：
html, body {
height:100%;
}
如果你说高度：100％，你的意思是'100％的父元素'。 如果父元素没有指定的高度，则不会发生任何事情。 您只在身体上设置了100％，但您还需要将其添加到html。
您可以将其设置为查看高度
html, body
{
height: 100vh;
}
你设置了CSS：
html, body
{
height: 100%;
}
你需要这个才能让div占用所有的空间。 :)
html {
min-height: 100%;
}
body {
min-height: 100vh;
}
html height (%)将处理height超过screen view 100%的文档高度，而body view height (vh)将处理文档高度小于高度的文档高度。屏幕视图。
我一直在考虑这个并试验元素的高度：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>
使用我的浏览器（Firefox 65 @ mint 64），所有三个元素都是1）不同的高度，2）每个元素都比前一个更长（html为50％，body为70vh，div为90vh）。 我还检查了没有相对于html和body标签的高度的样式。 工作得很好。
关于CSS单位： w3schools：CSS单位
关于视口的注释：“视口=浏览器窗口大小。如果视口宽50厘米，则1vw = 0.5厘米。”
如何正确设置100％DIV高度以匹配文档/窗口高度？
[英]How to properly set the 100% DIV height to match document/window height?
如何将SVG的高度设置为其封闭容器的高度？
[英]How do I set the height of an SVG to the height of its enclosing container?
如何在Firefox中制作包含div的iframe 100％高度？
[英]How do I make an iframe 100% height of a containing div in Firefox?
我将html，body和container div设置为100％高度，但页面顶部仍然有空隙吗？
[英]I have html,body and container div set to 100% height yet there is still a gap at top of page?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.