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

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

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

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

当前回答

有几种方法可用于将＜div＞的高度设置为100%。

方法（A）：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100%；宽度：50%；背景：绿色；}.div右{高度：100%；宽度：50%；背景：灰色；}<div class=“div left”></div><div class=“div right”></div>

方法（B）使用vh：

html，正文{高度：100%；最小高度：100%；}.div左{高度：100vh；宽度：50%；背景：绿色；浮动：左侧；}.div右{高度：100vh；宽度：50%；背景：灰色；浮动：右侧；}<div class=“div left”></div><div class=“div right”></div>

方法（c）使用挠性箱：

html，正文{高度：100%；最小高度：100%；}.包装器{高度：100%；最小高度：100%；显示：柔性；}.div左{宽度：50%；背景：绿色；}.div右{宽度：50%；背景：灰色；}<div class=“wrapper”><div class=“div left”></div><div class=“div right”></div></div>

2017-01-04 10:43:53

其他回答

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

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

有一种可能性：

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

尝试以下CSS：

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

2017-04-18 05:56:50

非常简单的解决方案，支持跨域，还支持浏览器重新调整大小。

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

根据需要调整iframe高度属性（将div高度属性保留为100vh）。

为什么80%？在我的真实场景中，我在div中的iframe之前有一个标头，这会占用一些垂直空间-因此我将iframe设置为使用80%而不是100%（否则它将是包含div的高度，但从标头之后开始，并溢出div的底部）。

2020-02-24 02:30:06

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

html, 
body {
    height: 100%;
}

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

2016-04-14 10:19:46

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

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

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

推荐文章

最新文章

标签