Pourquoi le pourcentage de hauteur des éléments enfants ne fonctionne-t-il pas lorsque le parent a une hauteur avec la fonction calc ?

Question

.html, body {
  height: 500px;
  border: 1px dotted blue;
  padding: 10px;
}
.container {
  width: 400px;
  height: calc( 100%-100px);
  border: 1px solid black;
}
.child {
  border: 1px solid red;
  height: 100%;
}

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

Ici j'ai utilisé la hauteur avec la fonction calc sur le conteneur. Le problème est que le div enfant ne prend pas 100% de la hauteur de son parent. Pourquoi en est-il ainsi ?

Answer 1

Nécessité d'ajouter des espaces avec calc() fonction :

.container {
  width: 400px;
  height: calc(100% - 100px);
  border: 1px solid black;
}

Ensuite, supprimez le html, le body padding :

.html, body {
  padding: 0;
}

Dans ce fiddle que j'ai fait avec le code ci-dessus le conteneur est à 100% de la hauteur du parent.

Dans le violon que @Frits a fourni il a corrigé le calc() question.