Почему нельзя задать height в процентах?

Question

[asdasdqwe]

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

.parent {
  background-color:red;
}

.child {
  height: 100%;             
  background-color:green;
}

В итоге height у child - 0px; Почему для родительского элемента обязательно надо задать height, почему браузер динамический не может посчитать? (а вот width посчитать в процентах может)

Answer 1

[Ankhena]

Ну попробуйте подумать со стороны браузера.

Высота родителя не указана, значит, зависит от размеров дочерних. Т.е. нужно сначала нарисовать дочерние, чтобы узнать высоту родителя.
Но дочернему вы хотите задать размер в % от родителя.

У вас получится в таких случаях:
- дочерний будет absolute, а родитель relative
- родитель будет гридом с использованием единиц fr.

Answer 2

[Сергей delphinpro]

Процент - это относительная величина. Он должен от чего-то высчитываться.

Почему для родительского элемента обязательно надо задать height, почему браузер динамический не может посчитать? (а вот width посчитать в процентах может)

Вы уверены, что width может посчитать в процентах, если ширина не определена?
Тогда проверьте такой пример:

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

.parent {
  background: red;
}
.child {
  background: green;
  width: 100%;
}

Дело в том, что ширина у инлайн элементов, работает так же как и высота – определяется содержимым.

Теперь вернемся к вашему примеру и представим, что было бы, если высота в процентах считалась так, как вы предполагаете (это же будет справедливым и для инлайн-ширины).

Допустим высота parent не задана, но исходя из размера содержимого, она равна 20px. Для child 100% по вашей логике высота должна быть равна двадцати пикселям. Тогда высота parent получается уже 20+20=40. Но тогда и высота child должна стать 40. Но теперь высота parent уже 80. Ну и так далее, уходим в рекурсию.
Вот и получается, что высоту в процентах посчитать нельзя.

Вот если выдрать child из потока, сделать его абсолютным, parent = relative, то высота parent уже не будет зависеть от child и 100% для child станет равным высоте parent.