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

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

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

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

当前回答

在这种情况下，可以使用vh，它是相对于视口高度的1%。。。

这意味着，如果你想掩盖高度，只需使用100vh。

请看下面我在这里为您绘制的图像：

尝试我为您创建的代码段，如下所示：

.左侧{高度：100vh；宽度：50%；背景色：灰色；浮动：左侧；}.对{高度：100vh；宽度：50%；背景色：红色；浮动：右侧；}<div class=“left”></div><div class=“right”></div>

2017-06-03 17:43:42

其他回答

你没有提到一些重要的细节，比如：

布局是否固定宽度？两列中的一列或两列的宽度是否固定？

有一种可能性：

身体第二部分{边距：0；边框：0无；填充：0；}html，身体#包装，#左侧，#权利{高度：100%；最小高度：100%；}#包装，包装{边距：0自动；溢出：隐藏；宽度：960px；/*宽度可选*/}#左侧{背景：黄色；浮动：左侧；宽度：360px；/*宽度可选，但建议使用*/}#权利{背景：灰色；左边距：360px；/*必须与以前的宽度一致*/}<html><head><title>示例</title></head><body><div id=“wrapper”><div id=“left”>左边</div><div id=“right”></div></div></body></html>

这取决于哪些柱需要固定，哪些柱是液体。您也可以使用绝对定位来实现这一点，但我通常使用浮点数来获得更好的结果（特别是在跨浏览器方面）。

2009-10-15 23:13:33

只需使用“vh”单位而不是“px”，这意味着查看端口高度。

height: 100vh;

2018-03-10 00:52:28

最简单：

html，正文{高度：100%；最小高度：100%；}正文{位置：相对；背景：紫色；边距：0；填充：0；}.全高{显示：块；位置：相对；背景：红色；高度：100%；宽度：300px；}<html class=“”><body><div class=“fullheight”>这是全高。</div></body></html>

2014-04-18 19:37:14

如果将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
}

2022-02-03 12:34:08

如果你能绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

2009-10-15 21:31:51

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

推荐文章

最新文章

标签