Ребенок внутри родителя с минимальной высотой: 100% не наследует рост

Question

Я нашел способ заставить контейнер div занимать хотя бы полную высоту страницы, установив min-height: 100%;. Однако, когда я добавляю вложенный div и устанавливаю 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

Это то, что работает для меня, когда рост в процентах и ​​родительский рост все еще растут в соответствии с ростом детей.Прекрасно работает в Firefox, Chrome и Safari.

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

Answer 2

Просто чтобы закончить эту тему, я нашел решение, которое не исследовано Здесь с использованием фиксированной позиции.

Без переполнения

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

С переполнением

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

Answer 3

Хотя здесь было предложено display: flex;, рассмотрите возможность использования display: grid; сейчас, когда он широко поддерживается .По умолчанию единственный дочерний элемент сетки будет полностью заполнять своего родителя.

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

Answer 4

после попытки за наш!chrome понимает, что я хочу, чтобы дочерний элемент имел высоту 100%, когда я устанавливаю отображаемое значение для встроенного блока.Кстати, параметр float будет вызывать его.

display:inline-block

update

это не работает.решение состоит в том, чтобы получить смещение родительского узла и использовать его на странице и с javascript.

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>