Html 如何使元素达到页面的全高？

有没有一种方法可以设置一个DIV元素来占据页面上的所有高度。比如：

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

---

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

确保将

height:100%

设置为

html

和

body

，这样div就有了一个关于height的上下文！希望有帮助。

非常确定您需要将

html

和

body

设置为100%：

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

---

Fiddle.

如果

div

是

body

的直接子对象，则此操作有效：

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

否则，你必须不断地为每个孩子的父母、祖父母、父母添加身高：100%，。。。直到你找到

body

的直接子对象

很简单。要使百分比高度起作用，父级必须具有指定的高度（px，%…以两者为准）。如果没有，那么就好像您已经设置了

高度：auto

---

另一种方法是，正如您在回答中所做的那样：它是给它一个绝对位置值，相对于定义页面高度的元素。

这是使div占据页面全部高度的最简单方法

height: 100vh;

---

vh

是视口高度，

1vh

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

此问题可以使用

CSS

flexbox解决。 浏览flexbox的w3schools文档和另一个有用的链接css技巧

在这种情况下

放显示器：flex；在父div容器中

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

然后在子div中放入显示：1

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

---

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

工作正常：谢谢兄弟。我搞砸了，没有在分区中添加任何内容。。。一定很晚了！再次感谢！乔希，你能详细说明一下你所说的答案吗。。？我想知道为什么100vh有效，但100%无效。谢谢。@ThunderBird Super late，但我刚刚发现，之所以能这样做，是因为默认情况下，正文和html标记只有在内容进入时才有大小，所以只需调用100vh，就可以告诉div按照视口大小，而不是检查父元素的大小。