最小高度的父母内部的孩子：100％没有继承身高

Question

最小高度的父母内部的孩子：100％没有继承身高我找到了一种方法，通过设置使div容器占据页面的至少全高min-height: 100%;。但是，当我添加嵌套的div和set时height: 100%;，它不会延伸到容器的高度。有办法解决吗？html, body {   height: 100%;   margin: 0;}#containment {   min-height: 100%;   background: pink;}#containment-shadow-left {   height: 100%;   background: aqua;}<div id="containment">   <div id="containment-shadow-left">     Hello World!  </div></div>

Answer 1

以为我会分享这个，因为我没有在任何地方看到这一点，而且是我用来修复我的解决方案。

解决方案：min-height: inherit;

我有一个指定最小高度的父母，我需要一个孩子也是那个高度。

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow}.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue}p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div></div>

这样，孩子现在充当最小高度的100％的高度。

我希望有些人觉得这很有用:)