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

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

我尝试过高度:100%,最小高度:100%;,等


当前回答

实际上,对我最有效的是使用vh属性。

在我的React应用程序中,我希望即使调整大小,div也能与页面高度匹配。我尝试了高度:100%;,溢出-y:自动;,但在设定高度时,它们都不起作用:(你的百分比)vh;它按预期工作。

注意:如果您正在使用填充、圆角等,请确保从vh属性百分比中减去这些值,否则会增加额外的高度并显示滚动条。这是我的示例:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

其他回答

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

html, 
body {
    height: 100%;
}

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

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

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

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

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

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

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

有几种方法可用于将<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>

100vw=视口宽度的100%。

100vh=视口高度的100%。

如果要将div宽度或高度设置为浏览器窗口大小的100%,应使用:

宽度:100vw

高度:100vh

或者,如果您想将其设置得更小,请使用CSS calc函数。例子:

#example {
    width: calc(100vw - 32px)
}

如果要设置<div>或任何元素的高度,也应该将<body>和<html>的高度设置为100%。然后可以将元素的高度设置为100%:)

下面是一个示例:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}