CSS pour "remplir la largeur du parent ?"

Question

J'ai un élément sur le DOM que j'aimerais simplement faire remplir la largeur de son parent, peu importe ce que c'est :

 <div width="800">
    <div class="filler"></div>
</div>

Comment puis-je spécifier en CSS que la filler correspond à la largeur de son parent ?

 .filler {
    ?
}

Answer 1

Avez-vous essayé : width: 100%; ?

Answer 2

Si l'élément interne n'est pas un div et a un rembourrage ou une marge, flexbox pourrait être la meilleure solution :

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

 .container {
    display: flex;
}
.filler {
    flex-grow: 1;
}

Voir aussi cette réponse sur la façon de remplir l'espace vertical restant .

Answer 3

À moins que quelque chose ne les arrête, les éléments de niveau bloc tels que div et p rempliront toujours toute la largeur de leur conteneur. Si vous avez un élément en ligne tel qu'un span ou un a , vous pouvez le styler comme display: block pour le transformer en un élément de niveau bloc, mais ceci mettra également un saut de ligne avant et après.

Answer 4

div est un élément de bloc et remplit par défaut son parent. si ce n'est pas le cas, vous utilisez probablement float:left ou float:right ou display:inline ou votre parent n'a pas 800px. (peut-être devriez-vous essayer avec style="width:800px" ou width="800px" au lieu de width="800" ) Je mets généralement une bordure de couleur pour voir comment cela fonctionne.