如何使元素成为页面的整个高度？

Question

有没有办法让我可以设置一个DIV元素占据页面上的所有高度.就像是:

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

我已经谷歌了几次,但它们看起来真的很复杂,因为一个简单的解决方案可能是一个非常简单的问题.

Answer 1

如果div是直接的孩子body,这适用:

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

否则,你必须继续增加height: 100%每个父母,祖父母,...直到你已经达到了直接的孩子body.

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

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

Answer 2

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

height: 100vh;

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