如何使div的高度达到浏览器窗口的100%

我有一个包含两列的布局-左div和右div。

右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。

我尝试过高度：100%，最小高度：100%；，等

当前回答

尝试在html和body中设置高度：100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同，请使用或设置父元素display：flex属性。

其他回答

尝试在html和body中设置高度：100%

html, 
body {
    height: 100%;
}

如果您想要2个div高度相同，请使用或设置父元素display：flex属性。

如果将html和body_height设置为100%，它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%，那么它将覆盖整个窗口，如下所示：

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，通过执行上面的CSS代码，您告诉div从直接父（body）继承100%的高度，并使其成为您的最小高度：100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}

你需要做两件事，一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

您可以在CSS中使用查看端口单元：

HTML格式：

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}

最简单的方法就是这样做。

第二部分{背景：红色；高度：100vh；}正文{边距：0px；}<div></div>

推荐文章