Un enfant dans un parent avec une hauteur minimale de 100% n'hérite pas de la hauteur.

Question

J'ai trouvé un moyen de faire en sorte qu'un conteneur div occupe au moins toute la hauteur d'une page, en définissant les paramètres suivants min-height: 100%; . Toutefois, lorsque j'ajoute un div imbriqué et que je définis le paramètre height: 100%; il ne s'étire pas à la hauteur du conteneur. Existe-t-il un moyen de le corriger ?

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

Ajouter height: 1px au conteneur parent. Fonctionne dans Chrome, FF, Safari.

Answer 2

J'ai pensé que je pourrais partager ceci, car je ne l'ai vu nulle part, et c'est ce que j'ai utilisé pour résoudre ma solution.

SOLUTION : min-height: inherit;

J'avais un parent avec une hauteur minimale spécifiée, et j'avais besoin qu'un enfant ait aussi cette hauteur.

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

De cette façon, l'enfant a maintenant une hauteur de 100% de la hauteur minimale.

J'espère que certaines personnes trouveront cela utile :)

Answer 3

Il s'agit d'un bogue signalé dans webkit (chrome/safari), les enfants des parents avec min-height ne peuvent pas hériter de la propriété height : https://bugs.webkit.org/show_bug.cgi?id=26559

Apparemment, Firefox est également touché (je ne peux pas tester dans IE pour le moment).

Solution possible :

• ajouter position:relative à #containment
• ajoute position:absolute à #containment-shadow-left

Le bogue n'apparaît pas lorsque l'élément intérieur a un positionnement absolu.

Voir http://jsfiddle.net/xrebB/

Edit le 10 avril 2014

Étant donné que je travaille actuellement sur un projet pour lequel je realmente ont besoin de conteneurs parentaux avec min-height et que les éléments enfants héritent de la hauteur du conteneur, j'ai fait quelques recherches supplémentaires.

D'abord : Je ne suis plus très sûr que le comportement actuel du navigateur soit vraiment un bug. Les spécifications de CSS2.1 disent :

Le pourcentage est calculé par rapport à la hauteur de l'écran. bloc contenant la boîte générée. Si la hauteur du bloc contenant n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de content height) et que cet élément n'est pas positionné de manière absolue, la valeur est égale à "auto".

Si je mets une hauteur minimale sur mon conteneur, je ne suis pas explicitement en spécifiant sa hauteur - donc mon élément devrait recevoir une auto hauteur. Et c'est exactement ce que Webkit - et tous les autres navigateurs - font.

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

Si je règle mon élément conteneur sur display:table con height:inherit il se comporte exactement de la même manière que si je lui donnais un min-height de 100 %. Et - plus important encore - si je règle 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.

Full CSS :

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

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

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

La majoration :

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

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

Answer 4

Cela a été ajouté dans un commentaire par @jackocnr mais je l'ai manqué. Pour les navigateurs modernes, je pense que c'est la meilleure approche.

Il fait en sorte que l'élément intérieur remplisse tout le conteneur s'il est trop petit, mais étend la hauteur du conteneur s'il est trop grand.

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Answer 5

Bien que display: flex; a été suggéré ici, envisagez d'utiliser display: grid; maintenant que c'est largement soutenu . Par défaut, le seul enfant d'une grille remplit entièrement son parent.

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;
}