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

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

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


当前回答

您可以使用显示器:flex和高度:100vh

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

其他回答

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

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

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

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

body {
  min-height: 100vh;
}

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

html, 
body {
    height: 100%;
}

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

即使有了这里的所有答案,我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度,当内容超过一页时,布局就会中断。如果我改用100%高度/分钟高度,当内容小于页面高度时,布局会中断。

我找到的解决方案(解决了这两种情况)是结合前两个答案:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

您可以在CSS中使用查看端口单元:

HTML格式:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}

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

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/