css - 如何让 div 采用屏幕的高度？

Question

我尝试使用

height: 100%

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

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

score 11 · Accepted Answer

您还需要bodyandhtml元素具有100%高度。

试试下面的 CSS：

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

YourDivSelector {
    height: 100%;
}

边距和内边距必须设置为 0 以防止 Firefox 中的自动滚动。

score 1 · Accepted Answer

1

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

于 2009-07-08T00:45:51.283 回答

score 1 · Accepted Answer

1

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

 html,body{height:100%}

于 2009-07-08T00:50:38.583 回答

score 1 · Accepted Answer

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

html, body {
   height: 100%;
}

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

也许

min-height:100%;

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

score 0 · Accepted Answer

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

7 回答 7