如果将html和body_height设置为100%，它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%，那么它将覆盖整个窗口，如下所示：

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，通过执行上面的CSS代码，您告诉div从直接父（body）继承100%的高度，并使其成为您的最小高度：100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}

整个页面称为“视口”，您可以根据CSS 3中的视口设计元素。

这种单位称为视口百分比长度，与初始包含块的大小相关。

视口高度称为vh。页面的完整高度为100vh。视口宽度称为vw。页面的完整高度为100vw。还有vmin（视口最小长度）和vmax（视口最大长度）。

因此，现在，您的问题可以通过在CSS中添加以下内容轻松解决：

.classname-for-right-div /* You could also use an ID */ {
  height: 100vh;
}

以下是有关视口相对长度的信息。

.包装器{显示：-webkit框；显示：-ms flexbox；显示：柔性；-ms-flex-wrap:包裹；柔性包裹：包裹；高度：100vh；/*高度窗口（vh）*/}.包装器.左侧{宽度：80%；/*宽度可选，但建议使用*/}.包装器.右侧{宽度：20%；/*宽度可选，但建议使用*/背景色：#DD1F26；}<!--vw：视口宽度的百分之一。vh：视口高度的百分之一。vmin：视口宽度或高度中较小者的百分之一。vmax：视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>

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

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

来源

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

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/

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

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

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

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

body {
  min-height: 100vh;
}