Question

我的容器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%;
}

如果有任何帮助，我将不胜感激。

谢谢，

尼克

Answer 1

将此添加到您的css：

html, body {
    height:100%;
}

如果你说身高：100％，你的意思是'100％的父元素'。如果父元素没有指定的高度，则不会发生任何事情。你只在身体上设置100％，但你还需要将它添加到html。

Answer 2

你设置了CSS：

html, body
{
    height: 100%;
}

你需要这个才能让div占用所有空间。：）

Answer 3

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

html, body
{
    height: 100vh;
}

Answer 4

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

html height (%)会处理height超过100% screen view的文档的高度，body view height (vh)会照顾public void Configuration(IAppBuilder app) { app.UseCors(CorsOptions.AllowAll); app.Properties["host.AppMode"] = "development"; app.UseErrorPage(new Microsoft.Owin.Diagnostics.ErrorPageOptions { ShowExceptionDetails = true }); app.MapSignalR(); }文档高度小于屏幕视图的高度。

Answer 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％，正文为70vh，div为90vh）。我还检查了相对于html和body标签没有高度的样式。也很好。

关于CSS单位：w3schools: CSS units

关于视口的注释：“视口=浏览器窗口的大小。如果视口为50cm宽，则1vw = 0.5cm。”

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

5 个答案: