web-dev-qa-db-fra.com

Conteneur CSS div n'atteignant pas la hauteur

Je veux que mon conteneur div ait la hauteur maximale de la taille de ses enfants. sans savoir quelle hauteur l'enfant divs va avoir. J'essayais sur JSFiddle . Le conteneur div est en rouge. qui ne se présente pas. Pourquoi?

csscss-floatliquid-layout
113
Neel Basu

Ajoutez la propriété suivante:

.c{
    ...
    overflow: hidden;
}

Cela forcera le conteneur à respecter la hauteur de tous les éléments qu'il contient, indépendamment des éléments flottants.
http://jsfiddle.net/gtdfY/3/

MISE À JOUR

Récemment, je travaillais sur un projet nécessitant cette astuce, mais devant permettre le débordement, vous pouvez donc utiliser un pseudo-élément pour effacer vos flottants, obtenant ainsi le même effet tout en permettant le débordement de tous les éléments.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

277
Nightfirecat

Vous faites flotter les enfants, ce qui signifie qu'ils "flottent" devant le conteneur. Afin de prendre la bonne hauteur, vous devez "effacer" le flotteur

Le div style = "clear: both" efface le flottant et donne la hauteur correcte au conteneur. voir http://css.maxdesign.com.au/floatutorial/clear.htm pour plus d'informations sur les flotteurs.

par exemple.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>
27
Yoeri

Ce n'est pas si facile?

.c {
    overflow: auto;
}
19
Antonio Romero Oca

Essayez d’insérer cette division avant le dernier </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

4
lee

La solution la meilleure et la plus efficace est d'ajouter ::before et ::after pseudoéléments dans le conteneur. Donc si vous avez par exemple une liste comme:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

Et tous les éléments de la liste ont float:left propriété, alors vous devriez ajouter à votre css:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Ou vous pouvez essayer display:inline-block; _ propriété, vous n'avez pas besoin d'ajouter de clearfix.

2
Agata