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

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

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

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

当前回答

此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。

您只需设置高度：100%。

html，正文{高度：100%；边距：0；}.内容{高度：100%；最小高度：100%；位置：相对；}.剩余内容{高度：自动；最小高度：100%；浮动：左侧；背景：#ddd；宽度：50%；位置：相对；}#一个{背景：url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa；宽度：50%；位置：相对；浮动：左侧；}#两个{背景：url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24；宽度：50%；浮动：左侧；位置：相对；overflow-y：滚动；}<div class='content'id='one'></div><div class='content-left'id='wo'></div>

2018-05-22 05:02:30

其他回答

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

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

会做到这一点。

2009-10-15 21:31:51

您可以使用以下CSS使div达到浏览器窗口高度的100%：

display: block;
position: relative;
bottom: 0;
height: 100%;

2018-09-07 20:08:10

如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）

下面是一个示例：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

2011-12-11 13:10:31

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

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

有一种可能性：

身体第二部分{边距：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

与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。

随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。

注意标记和CSS是多么简单。没有桌子黑客之类的。

所有主要浏览器以及IE11+都支持flex模型。

html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>

在这里了解有关flex模型的更多信息。

2013-06-12 14:14:35

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

推荐文章

最新文章

标签