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

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

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


当前回答

这对我有用:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

摘自本页。

其他回答

你需要做两件事,一是将高度设置为你已经做到的100%。第二个是将位置设置为绝对位置。这应该会奏效。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

来源

最简单:

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

100%对于宽度和高度的作用不同。

当您指定width:100%时,意味着“从父元素或窗口的宽度中占用可用宽度的100%”

当您指定height:100%时,它只意味着“从父元素占用可用高度的100%”。这意味着如果不在顶层元素处指定高度,则所有子元素的高度将为0或父元素的高度,这就是为什么您需要将最顶层元素设置为窗口高度的最小高度。

我总是指定车身的最小高度为100vh,这使得定位和计算变得容易,

body {
  min-height: 100vh;
}

实际上,对我最有效的是使用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 {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

摘自本页。