La hauteur du parent div est égale à zéro même si l’enfant a des hauteurs finies

J’ai un site Web dont la disposition a été montrée dans le diagramme. Le corps est constitué d’un main container , qui comprend l’en- header , le parent div et le footer . Le parent div contient en outre plusieurs child div comme indiqué.

Mise en page Web

Le problème étant la hauteur de toutes les child div est fini. Mais la parent div ne contient rien d’autre que les div enfants. Tous les div enfants sont visibles, mais la hauteur du div parent est zéro. Je ne fixe pas non plus la hauteur du div parent en donnant une valeur pré-spécifiée, car cela peut causer une erreur si le nombre d’enfants augmente à l’avenir.

Le problème dû à la taille nulle du div parent est que mon div pied de page monte et se heurte au contenu du div parent. Cela peut être résolu en donnant une marge supérieure, mais ce n’est pas une solution que je recherche.

Quelqu’un peut-il me suggérer un moyen pour que la hauteur du div parent change automatiquement en fonction de la taille des div enfants présents.

S’il vous plaît commenter si je ne suis pas clair en demandant mon doute!

On dirait que vous avez un cas pour la classe clearfix .

Donc, je suppose que vous faites flotter la div enfant et c’est pourquoi la taille du div parent est 0. Lorsque vous utilisez des flottants, le parent ne s’adapte pas à la taille des enfants.

Mais en ajoutant la classe «clearfix» (bien sûr, vous devez l’avoir dans votre feuille de style), il appenda un «. à la fin (invisible bien sûr) et votre parent aura magiquement la hauteur correcte.

Notez, c’est la plateforme multi, compatible IE6 +, Chrome, Safari, Firefox, vous l’appelez!

 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } 

Essayez d’append ce qui suit à votre feuille de style:

 #parentdiv:after { content: " "; display: block; clear: both; } 

Comme Daedalus l’a suggéré dans son commentaire, vous faites probablement flotter les divs enfants. Si c’est le cas, la ligne ci-dessus la corrige.

Le problème lorsque vous flottez est que leur élément parent les “ignore”.

La ligne ci-dessus crée et insère un (pseudo) élément dans le #parentdiv qui est poussé au-delà de tous les div. Ensuite, le div parent, qui ignore les enfants flottants, n’ignore pas ce pseudo-élément – agissant comme il se doit, il se développe pour contenir le pseudo-élément. Maintenant, puisque le pseudo-élément est en dessous de tous les enfants flottants, le div parent arrive, ou mieux encore, semble “contenir” aussi les enfants flottants – ce qui est vraiment ce que vous voulez.