Le conteneur CSS div n'obtient pas de hauteur

116

Je veux que mon conteneur div atteigne la hauteur maximale de la taille de ses enfants. sans savoir quelle taille l enfant divva avoir. J'essayais sur JSFiddle . Le conteneur divest sur le rouge. qui n'apparaît pas. Pourquoi?

css css-float liquid-layout Neel Basu
la source

Réponses:

282

Ajoutez la propriété suivante:

.c{
    ...
    overflow: hidden;
}

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

METTRE À JOUR

Récemment, je travaillais sur un projet qui nécessitait cette astuce, mais qui avait besoin d'autoriser le dépassement de capacité, donc à la place, vous pouvez utiliser un pseudo-élément pour effacer vos flottants, obtenant ainsi le même effet tout en permettant le débordement sur tous les éléments.

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

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

Nightfirecat
la source
8
Fondamentalement, l'ajout de cette propriété force la boîte extérieure à ignorer la règle des conteneurs flottants, où ils ne sont pas calculés en hauteur pour les conteneurs, et à les appliquer pour le dessin d'arrière-plan complet.
Nightfirecat
4
Wow, je me suis dit "Quoi? Ça ne marchera pas." Mais je serai maudit. Je pensais totalement que cela n'allait pas se comporter correctement. Merci
fie
1
N'est-ce pas vraiment très piraté? Pour moi, cela va à l'encontre de l'objectif du débordement. Je ne comprends pas pourquoi c'est la réponse correcte et la plus votée.
Andrew Weir
3
@AndrewWeir J'admets que jusqu'à présent, je n'avais pas été tout à fait sûr de savoir pourquoi cette méthode d'expansion des conteneurs pour considérer correctement les flotteurs dans leur taille fonctionnait. Selon de plusieurs sources , il semble que cela provoque un élément à changer son mode de rendu, de permettre le débordement visible ne le faire, et ce faisant, ces éléments des forces pour interdire que trop - plein.
Nightfirecat
2
La première façon, en utilisant le débordement, fonctionne pour moi. La deuxième façon fonctionne AUSSI et semble moins risquée au cas où j'aurais un débordement à l'avenir. Je souhaite seulement pouvoir voter deux fois.
Tyler Collier du
28

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

Le style div = "clear: both" efface le flottant et donne la bonne hauteur 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>
Yoeri
la source
Ce clair: les deux; la chose semble être une solution appropriée pour la hauteur du conteneur, car le problème concerne les enfants flottants. Donc cette approche semble meilleure que le débordement: caché; un ci-dessus.
Ronnie Depp
Merci @Yoeri pour le partage de cette solution simple. Je recherche la même solution pour mon nouveau design car cela fait presque 6 ans que j'ai conçu une mise en page Web pour la dernière fois après m'être concentré uniquement sur la perspective du développement PHP plutôt que sur le côté design.
Ronnie Depp
20

Ce n'est pas si simple?

.c {
    overflow: auto;
}
Antonio Romero Oca
la source
Oui, c'est: D. Merci
Alauddin Ahmed
4

Essayez d'insérer ce div de compensation avant le dernier </div>

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

Lee
la source
3

La meilleure et la plus sûre des solutions consiste à ajouter des pseudo ::before- ::afteréléments au conteneur. Donc si vous avez par exemple une liste comme:

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

Et chaque élément de la liste a une float:leftpropriété, alors vous devez ajouter à votre css:

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

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

Agata
la source