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

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

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

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

当前回答

如果使用位置：绝对；和jQuery，您可以使用

$("#mydiv").css("height", $(document).height() + "px");

2013-09-12 09:41:58

其他回答

以下内容与您之前的回答不完全相同，但可能对某些人有所帮助：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

2017-06-12 14:52:41

其中一个选项是使用CSS表。它具有强大的浏览器支持，甚至可以在Internet Explorer 8中工作。

JSFiddle示例

html，正文{高度：100%；边距：0；}.容器{显示：表格；宽度：100%；高度：100%；}.左，.右{显示：表格单元格；宽度：50%；}.对{背景：灰色；}<div class=“container”><div class=“left”></div><div class=“right”></div></div>

2016-01-25 17:36:46

有两个CSS 3测量单位称为：

视口百分比（或视口相对）长度

什么是视口百分比长度？

从上面链接的W3候选推荐：

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度更改时，将相应地缩放它们。

这些单位是vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和vmax（视口最大长度）。

如何使用分隔符填充浏览器的高度？

对于这个问题，我们可以使用vh：1vh等于视口高度的1%。也就是说，100vh等于浏览器窗口的高度，而不考虑元素在DOM树中的位置：

HTML

<div></div>

CSS

div {
    height: 100vh;
}

这就是我们真正需要的。这里是一个使用中的JSFiddle示例。

哪些浏览器支持这些新单元？

除Opera Mini外，目前所有最新的主要浏览器都支持此功能。我可以使用。。。以获得进一步支持。

如何将其用于多个列？

在手头的问题中，有一个左右分隔符，这里有一个JSFiddle示例，显示了一个包含vh和vw的两列布局。

100vh与100%有何不同？

以该布局为例：

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

这里的p标记设置为100%高度，但由于其包含div的高度为200像素，因此200像素中的100%变成200像素，而不是身体高度的100%。改用100vh意味着无论div高度如何，p标签都将是主体的100%高度。看看这个附带的JSFiddle，很容易看出区别！

2013-05-30 13:33:35

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

height: 100vh;

2018-03-10 00:52:28

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

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

有一种可能性：

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

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

推荐文章

最新文章

标签