如何将容器DIV的高度设置为窗口高度的100％？
[英]how do I set height of container DIV to 100% of window height?
问题描述
I have a couple of problems with my container DIV. 
我的容器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 . 你可以在这个页面上看到我的意思。
I would also like the container DIV to always fill the available height of the screen/window. 我还希望容器DIV始终填充屏幕/窗口的可用高度。 I have tried setting it to min-height:100% , but this didn't have any effect. 我已经尝试将它设置为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 缺口
5 个解决方案
解决方案1
48 已采纳 2011-12-12 10:58:25
Add this to your css: 将此添加到您的CSS：
html, body {
height:100%;
}
If you say height:100%, you mean '100% of the parent element'. 如果你说高度：100％，你的意思是'100％的父元素'。 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. 您只在身体上设置了100％，但您还需要将其添加到html。
解决方案2
7 2014-11-11 14:19:46
You can net set it to view height 您可以将其设置为查看高度
html, body
{
height: 100vh;
}
解决方案3
7 2011-12-12 10:58:27
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占用所有的空间。 :) :)
解决方案4
4 2015-11-04 17:46:24
html {
min-height: 100%;
}
body {
min-height: 100vh;
}
The html height (%) will take care of the height of the documents that's height is more than a 100% of the screen view while 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超过screen view 100%的文档高度，而body view height (vh)将处理文档高度小于高度的文档高度。屏幕视图。
解决方案5
0 2019-01-30 18:22:31
I've been thinking over this and experimenting with height of the elements: html, body and div. 我一直在考虑这个并试验元素的高度：html，body和div。 Finally I came up with the code: 最后我想出了代码：
<!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). 使用我的浏览器（Firefox 65 @ mint 64），所有三个元素都是1）不同的高度，2）每个元素都比前一个更长（html为50％，body为70vh，div为90vh）。 I also checked the styles without the height with respect to the html and body tags. 我还检查了没有相对于html和body标签的高度的样式。 Worked fine, too. 工作得很好。
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厘米。”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.