web-dev-qa-db-fra.com

La hauteur du div parent est nulle même s'il a un enfant avec des hauteurs finies

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

Webpage Layout

Le problème étant la hauteur de tous les child div est fini. Mais le parent div ne contient rien d'autre que les divs enfants. Toutes les divisions enfant sont visibles, mais la hauteur de la division parent est nulle. Je ne fixe pas non plus la hauteur du div parent en donnant une valeur prédéfinie car cela peut provoquer une erreur si le nombre d'enfants augmente à l'avenir.

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

Quelqu'un peut-il me suggérer un moyen pour que la hauteur de la division parent change automatiquement en fonction de la hauteur des divisions enfant présentes.

Veuillez commenter si je ne suis pas clair en posant mon doute!

csscss3heightparent-child
53
Prashant Singh

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

Je suppose donc que vous faites flotter le div enfant et c'est pourquoi la hauteur du div parent est 0. Lorsque vous utilisez des flottants, le parent ne s'adapte pas à la hauteur des enfants.

Vous pouvez appliquer les classes 'clearfix' au parent des éléments flottants (bien sûr, vous devez l'avoir dans votre feuille de style) et cela ajoutera un insivible '.' à la fin. Votre parent aura alors la bonne taille.

Remarque, c'est multiplateforme, 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%;
}
83
VVV

Essayez d'ajouter ce qui suit à votre feuille de style:

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

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

Le problème lorsque vous faites flotter des choses 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é vers le bas après tous les div flottants. Ensuite, le div parent, qui, bien qu'il 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 se produit, ou mieux encore, semble "contenir" les enfants flottés également - ce qui est vraiment ce que vous voulez.

48
banzomaikaka