Lorsque l'élément parent définit min-height : 100 %, l'élément enfant n'héritera pas de la hauteur.

Question

J'ai trouvé un moyen de faire en sorte qu'un conteneur div occupe au moins toute la hauteur de la page en définissant min-height: 100%;. Cependant, lorsque j'ajoute un div imbriqué et que je définis height: 100%;, il ne s'étend pas jusqu'à la hauteur du conteneur. Existe-t-il un moyen de résoudre ce problème ?

html, corps {
  hauteur : 100 % ;
  marge : 0 ;
}

#confinement {
  hauteur min : 100 % ;
  fond : rose ;
}

#confinement-ombre-gauche {
  hauteur : 100 % ;
  fond : aqua ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="confinement">
  <div id="confinement-shadow-left">
    Bonjour le monde!
  </div>
</div>

Answer 1

Ajoutez height: 1px dans le conteneur parent. Fonctionne dans Chrome, FF et Safari.

Answer 2

Il s'agit d'un bug du webkit (chrome/safari) signalé où les éléments enfants d'un élément parent avec une hauteur minimale ne peuvent pas hériter de l'attribut height : https://bugs.webkit.org/show_bug.cgi?id=26559

Apparemment, Firefox est également affecté (impossible de tester dans IE pour le moment)

Solutions possibles :

• Ajouter position :relatif en #confinement
• Ajouter la position : absolu dans #containment-shadow-left

Le bug n'apparaît pas lorsque l'élément interne a un positionnement absolu.

Voir http://jsfiddle.net/xrebB/

Modifié le 10 avril 2014

Comme je travaille actuellement sur un projet qui doit vraiment avoir min-height des éléments parent et enfant héritant de la hauteur du conteneur, j'ai fait quelques recherches supplémentaires.

Tout d'abord : Je ne sais plus si le comportement actuel du navigateur est réellement un bug. La spécification CSS2.1 dit :

Si je définis la hauteur minimale sur le conteneur, je ne précise pas explicitement sa hauteur - donc mon élément devrait avoir une autohauteur. C'est exactement ce que font Webkit - et tous les autres navigateurs.

Deuxièmement, la solution que j'ai trouvée :

Si je définis l'élément conteneur sur display:table et que j'utilise height:inherit, il se comporte exactement de la même manière que si je lui donnais un display:table并使用height:inherit，它的行为与给它一个min-height为100%完全相同。而且 - 更重要的是 - 如果我将子元素设置为display:table-cellde 100 %. Et - plus important encore - si je définis l'élément enfant sur display:table-cell, il héritera parfaitement de la hauteur de l'élément conteneur - qu'elle soit de 100 % ou plus.

CSS complet :

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

Étiquette :

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

Voir http://jsfiddle.net/xrebB/54/.