Как заставить <div>заполнить оставшуюся высоту, не используя flexbox?

Question

У меня есть HTML-макет, как это:

,-------------.
|,-----------.|
|| child 1   ||
|`-----------'|
|,-----------.|
|| child 2   ||
||           ||
||           ||
||           ||
||           ||
|`-----------'|
`-------------'

Контейнеру присваивается значение высоты, скажем, 100vh, а child 1 имеет фиксированную высоту. Я хочу, чтобы child 2 автоматически заполнил оставшуюся высоту.

Я знаю, что есть решение flexbox:

.container { 
    display: flex;
    flex-direction: column;
}
.child-1 {
    flex-shrink: 0;
    flex-grow: 0;
}
.child-2 {
    flex-grow: 1;
}

Решение работает в одиночку, но если мне нужен третий дочерний элемент child 3 внутри child 2 с height: 100%, оно не будет выполнено. Мне нужно сделать child 2 flex и установить child 3 на flex-grow: 1.

Этот вид наследования сгибания становится действительно неприятным, так как вложение углубляется. Также он нарушает «Разделение проблем», поскольку структура DOM работает только тогда, когда все узлы правильно установлены на display: flex.

Ниже jsfiddle демонстрирует проблему.

html,
body {
  margin: 0;
}

div {
  width: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child-1 {
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
}

.child-2 {
  flex-grow: 1;
}

.child-3 {
  height: 80%;
}


/* irrelevant styles like background-color etc. */

.container.irrelevant {
  width: 100px;
  background: green;
  float: left;
  margin-right: 20px;
}

.child-1.irrelevant {
  background: red;
}

.child-2.irrelevant {
  background: magenta;
}

.child-3.irrelevant {
  background: yellow;
}

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2<br> Seems like it works
  </div>
</div>

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2
    <div class="child-3 irrelevant">
      But it doesn't, child 3 should fill 80% height of the child 2.
    </div>
  </div>
</div>

Answer 1

О, вы можете использовать calc для этого. Как то так;

.child-2 { height: calc(100vh - 100px); }

Предполагается, что фиксированная высота для .child-1 равна 100px.

Если вы хотите что-то более динамичное, используйте решение @ patelarpan, но это быстро и просто (и не грязно).

Answer 2

Кажется, что .child-3 не может правильно рассчитать рост родителей, если он не установил flex-basis. Таким образом, вы можете исправить это, используя flex: 1 на child-2 DEMO или просто добавив flex-basis: 0% DEMO , который является То же самое будет делать браузер, если вы используете flex: 1.

html,
body {
  margin: 0;
}

div {
  width: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child-1 {
  flex: 1;
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
}

.child-2 {
  flex: 1;
}

.child-3 {
  height: 80%;
}


/* irrelevant styles like background-color etc. */

.container.irrelevant {
  width: 100px;
  background: green;
  float: left;
  margin-right: 20px;
}

.child-1.irrelevant {
  background: red;
}

.child-2.irrelevant {
  background: magenta;
}

.child-3.irrelevant {
  background: yellow;
}

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2<br> Seems like it works
  </div>
</div>

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2
    <div class="child-3 irrelevant">
      But it doesn't, child 3 should fill 80% height of the child 2.
    </div>
  </div>
</div>

Answer 3

Добавить height: 100% к ребенку 2.

Вы также можете использовать CSS grid, но это поддерживается не во всех браузерах.

html,
body {
  margin: 0;
}

div {
  width: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child-1 {
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
}

.child-2 {
  flex-grow: 1;
  height: calc(100% - 50px); /* add this line */
}

.child-3 {
  height: 80%;
}


/* irrelevant styles like background-color etc. */

.container.irrelevant {
  width: 100px;
  background: green;
  float: left;
  margin-right: 20px;
}

.child-1.irrelevant {
  background: red;
}

.child-2.irrelevant {
  background: magenta;
}

.child-3.irrelevant {
  background: yellow;
}

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2<br> Seems like it works
  </div>
</div>

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2
    <div class="child-3 irrelevant">
      But it doesn't, child 3 should fill 80% height of the child 2.
    </div>
  </div>
</div>