如何让 div 采用屏幕的高度？答案

【问题标题】：How can I make a div adopt the height of the screen?如何让 div 采用屏幕的高度？
【发布时间】：2010-11-08 21:29:39
【问题描述】：

我尝试过使用

height: 100%

但这使得 div 只与它的内容一样高 - 它只包含一个文本单词。

如何强制 div 改为使用屏幕高度？

【问题讨论】：

【解决方案1】：

我有同样的问题。将 html 和 body 高度设置为 100% 不起作用，但是当我将 100vh 的 min-height 和 div 的 100% 的高度结合起来时，它起作用了。

html, body {
   height: 100%;
}

div {
   min-height: 100vh; 
   height: 100%;
}

【讨论】：

【解决方案2】：

只有定义了包含元素的高度时，您才能有意义地使用 height=100%。它的100％，是什么？如果在任何地方定义，则没有高度。您可以使用 javascript 来获取当前窗口的高度（如前所述），或指定 800px 或任何值的特定高度。 :D

【讨论】：

【解决方案3】：

你还需要设置html和body为height:100%;

 html,body{height:100%}

【讨论】：

【解决方案4】：

您应该将所有包含 div 的容器也设置为 height:100%，包括 body 和 html 标签。

【讨论】：

【解决方案5】：

您还需要 body 和 html 元素具有 100% 高度。

试试下面的 CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

YourDivSelector {
    height: 100%;
}

margin 和 padding 必须设置为 0 以防止在 Firefox 中自动滚动。

【讨论】：

【解决方案6】：

也许

min-height:100%;

你到底想做什么？发布更多信息，我们可以为您提供更多帮助

【讨论】：

【解决方案7】：

您可以获取窗口using JavaScript 的宽度和高度，然后根据需要使用这些值设置div 的高度和宽度。

【讨论】：