html - 在另一个 div 中扩展一个 div 的高度

Question

我在使用两个包装器时遇到问题。我想让 #wrapper 始终延伸到屏幕底部。现在可以通过使用 min-height: 100%; 来实现。在这个 div 中，我使用了另一个包装器 #page-wrapper，它应该扩展到 #wrapper div 的底部。要使其正常工作，必须将 #wrapper div 设置为 height: 100% 而不是 min-height。有没有办法同时实现？

#wrapper {
  width: 100%;
  background-color: #2f4050;
  min-height: 100%;
  position: relative;
}

#page-wrapper {
  padding: 0 15px;
  min-height: 100%;
  background-color: white;
  height: 100%;
}

<div id="wrapper">
  <div id="page-wrapper"></div>
</div>

Answer 1

尝试使用视口(viewport)单位。

#page-wrapper {
  min-height: 100vh;
}

示例 1:

body {
  margin: 0;
}
#wrapper {
  background: pink;
}
#page-wrapper {
  min-height: 100vh;
  background: gold;
}

<div id="wrapper">
  <div id="page-wrapper">
  </div>
</div>

示例 2:

body {
  margin: 0;
}
#wrapper {
  background: pink;
}
#page-wrapper {
  min-height: 100vh;
  background: gold;
}

<div id="wrapper">
  <div id="page-wrapper">
    <div style="height:200vh;"></div>
  </div>
</div>