html - 如何使元素成为页面的全高？

Question

有没有办法可以设置一个 DIV 元素来占据页面上的所有高度。就像是：

div.left {
  height: 100%;
  width: 50%;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

我已经用谷歌搜索了几次，但对于一个简单的解决方案可能是一个非常简单的问题，它们似乎都是非常复杂的解决方法。

score 15 · Accepted Answer

如果div是的直接子级body，则有效：

body, html {height: 100%; }
div { height: 100%; }

否则，您必须不断添加height: 100%它的每个父母，祖父母，......直到您达到body.

这很简单。要使百分比高度起作用，父级必须具有指定的高度（px，％...无论哪个）。如果没有，那么就好像你已经设置了height: auto;

另一种方法是你在你的答案中：它是给它一个绝对位置值，相对于定义页面高度的元素。

score 10 · Accepted Answer

这是让 div 占据整个页面高度的最简单方法。

height: 100vh;

vh是视口高度，1vh等于视口高度的 1%。有关 CSS 中此度量单位和其他度量单位的更多详细信息，请参见此处。

score 1 · Accepted Answer

1

确保您设置height: 100%为htmlandbody以便 div 具有高度的上下文！希望有帮助。

于 2012-09-24T22:29:26.870 回答

score 1 · Accepted Answer

很确定您需要将htmland设置body为 100%：

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

在这里拉小提琴。

score 1 · Accepted Answer

这个问题可以使用CSSflexbox 来解决。在此处浏览 flexbox 的 w3schools 文档，并在此处查看另一个有用的链接 css-tricks

在这种情况下。

放显示：弹性；在父 div 容器中

div.container{
  height: 100%;
  display: flex;
}

然后在子 div 中放置 display: 1;

div.left{
  height: 100%;
  display: 1;
}

请注意，如果父 div 容器的高度是动态设置的，则子 div 将始终与父 div 具有相同的高度。

5 回答 5