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

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占据页面整个高度的最简单方法。

身高：100vh;

Answer 3

确保将height: 100%设置为html和body，以便div具有高度背景！希望有所帮助。

Answer 4

非常确定您需要将html和body设置为100％：

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

小提琴here。

Answer 5

可以使用CSS flexbox解决此问题。 浏览flexbox here的w3schools文档和另一个有用的链接css-tricks here

在这种情况下。

put显示：flex;在父div容器中

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

然后在子div放置显示中：1;

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

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