Div div enfant ne remplissant pas les parents - html, css

Je sais que ce titre est probablement l’un des plus courants sur SO, mais il me semble avoir un problème très spécifique que je ne trouve pas documenté.

j'ai un div que je veux être exactement carré, alors j'ai suivi les conseils de CSS dans cette réponse. Je veux aussi un enfant div pour remplir cet espace, j’ai donc suivi toutes les directives habituelles clear:both div dans un emballage, etc., mais mon div enfant est encore ne pas remplir son parent. Le problème est le height: 0 du parent parent - existe-t-il une solution à ce problème tout en conservant le carré exact (de préférence du CSS pur, je sais qu'il existe des solutions JS). Exemple: ce violon.

Réponses:

8 pour la réponse № 1

Vous pouvez donner à la boîte intérieure un absolute position et réglez-le sur les bords de la boîte contenant:

.box div {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(0,0,0,0.1);
}

jsfiddle

Vous ne savez pas si c’est meilleur que ce que vous avez proposé, peut-être si vous vouliez du contenu dans la boîte?

---

2 pour la réponse № 2

Si vous n'êtes pas trop inquiet pour soutien puis utiliser vh, vw ou vmin serait une bonne alternative. Étant donné que la hauteur serait effectivement définie, vous pouvez facilement définir l'élément enfant pour renseigner le parent.

CSS:

.parent {
width: 50vmin;
height: 50vmin;
background-color: blue;
margin: 0 auto;
}

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

HTML:

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

Voici un Exemple. J'aime vmax, mais ce n'est pas aussi bien pris en charge que vmin, vh et vw.

---

0 pour la réponse № 3

Ajouter padding-bottom: 100% à l'enfant div remplit l'espace et semble être une solution; la jsfiddle mis à jour reflète cela

---

0 pour la réponse № 4

Cette astuce de rembourrage pour les boîtes sensibles fonctionne avec absolute positionnement.

css-padding-astuce-réactif-ratios intrinsèques

Donc utiliser absolute positionnement pour div. intérieure

.box {
...
position: relative;
}

.box div {
...
position: absolute;
left: 0;
top: 0;
}

---