如何将元素设置为整个页面的高度？

Question

有没有一种方法可以使DIV元素占据页面的所有高度。就像这样：

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

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

- Joshua

---

运行良好：请点此查看 - hjpotter92

谢谢兄弟。我搞砸了，没有向div添加任何内容...可能已经很晚了！再次感谢！乔希 - Joshua

Answer 1

如果 div 是 body 的直接子元素，那么这样可以实现：

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

否则，你必须在每个父元素、祖父元素...一直添加height: 100%，直到达到body的直接子元素。

原理很简单。百分比高度的使用要求父元素必须有指定的高度（无论是像素还是百分比）。否则，它就像是已经设置了height: auto一样。

另一种实现方式就是按照你回答中所说的：给它一个相对于定义页面高度的元素的绝对定位值。

- João Paulo Macedo

Answer 2

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

height: 100vh;

vh 是 视口高度，1vh 相当于视口高度的 1%。有关 CSS 中其它单位的详细信息，请参见此处。

- Ben Grzybowski

---

请问您能详细说明一下您所提供的答案吗？我想知道为什么使用100vh可以，而使用100%不行。谢谢。 - ThunderBird

@ThunderBird 非常晚才发现这个代码之所以有效，是因为默认情况下 body 和 html 标签没有大小，直到有内容填充进来，因此调用 100vh 就告诉 div 跟随视口的大小而不是检查父元素的大小。 - CoderMan

Answer 3

这个问题可以使用CSS flexbox解决。请查看w3schools的flexbox文档这里和另一个有用的链接css-tricks 这里。

在这种情况下，请将display：flex;放入父div容器中。

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

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

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

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

- idmega2000

---

"display"不接受数值： https://developer.mozilla.org/zh-CN/docs/Web/CSS/display#formal_syntax 也许您的意图是设置 "flex-grow: 1"？ - mattanja

Answer 4

我相信你需要将 html 和 body 设置为 100%：

html {
  height: 100%;
}

body {
  height: 100%;
}

div.left {
  height: 100%;
}

请在这里操作 链接。

- ultranaut

Answer 5

请确保将height: 100%设置为html和body，以便div具有高度的上下文！希望这可以帮到您。

- Rchristiani