如何将容器 DIV 的高度设置为窗口高度的 100%？答案

【问题标题】：how do I set height of container DIV to 100% of window height?如何将容器 DIV 的高度设置为窗口高度的 100%？
【发布时间】：2012-01-18 09:05:34
【问题描述】：

我的容器 DIV 存在一些问题。一方面，它没有正确识别我的内容的高度（我原以为它会超出主要内容和侧边栏的底部，但事实并非如此）。你可以在this page 上看到我的意思。

我还希望容器 DIV 始终填充屏幕/窗口的可用高度。我尝试将其设置为min-height:100%，但这没有任何效果。

这是我用于容器 DIV 的 CSS：

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

如果您能帮我完成这项工作，我将不胜感激。

谢谢，

尼克

【问题讨论】：

在现代浏览器中 - stackoverflow.com/questions/6654958/…

标签： height css

【解决方案1】：

将此添加到您的 CSS：

html, body {
    height:100%;
}

如果您说 height:100%，您的意思是“父元素的 100%”。如果父元素没有指定高度，则不会发生任何事情。你只在body上设置了100%，但你还需要将它添加到html中。

【讨论】：

谢谢。这就是我需要知道的！

【解决方案2】：

您可以将其设置为查看高度

html, body
{
    height: 100vh;
}

【讨论】：

【解决方案3】：

您是否设置了 CSS：

html, body
{
    height: 100%;
}

你需要这个才能让 div 占据所有空间。 :)

【讨论】：

【解决方案4】：

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

html height (%) 将处理height 大于screen view 的100% 的文档的高度，而body view height (vh) 将处理小于高度的文档高度屏幕视图。

【讨论】：

通过编辑问题来解释你做了什么。让它有意义。

【解决方案5】：

我一直在思考这个问题并尝试了元素的高度：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>&lt;html&gt; is red</p>
		<p>&lt;body&gt; is green</p>
		<p>&lt;div&gt; is blue</p>
	</div>

</body>
</html>

使用我的浏览器 (Firefox 65@mint 64)，所有三个元素的 1) 高度不同，2) 每个元素都比前一个更长（html 为 50%，body 为 70vh，div 为 90vh）。我还检查了关于 html 和 body 标签的没有高度的样式。效果也很好。

关于 CSS 单元：w3schools: CSS units

关于视口的说明：“视口 = 浏览器窗口大小。如果视口宽 50 厘米，则 1vw = 0.5 厘米。”

【讨论】：