在另一个div内扩展div的高度

Question

我正在使用两个包装器时遇到问题。 我想使#wrapper始终延伸到屏幕底部。 现在可以使用min-height: 100%; 。 在此div中，我使用了另一个包装器#page-wrapper ，该#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

尝试使用视口单位。

#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>