Faire en sorte que la div externe ait automatiquement la même hauteur que son contenu flottant


94

Je veux que l'extérieur div, qui est noir, enveloppe ses divs flottant à l'intérieur. Je ne veux pas utiliser style='height: 200pxdans divavec l' outerdividentifiant car je veux qu'il soit automatiquement à la hauteur de son contenu (par exemple, les flottants div).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Comment y parvenir?

Réponses:


167

Vous pouvez définir le outerdivCSS de sur ceci

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Vous pouvez également le faire en ajoutant un élément à la fin avec clear: both. Cela peut être ajouté normalement, avec JS (pas une bonne solution) ou avec un :afterpseudo élément CSS (pas largement pris en charge dans les IE plus anciens).

Le problème est que les conteneurs ne se développeront pas naturellement pour inclure des enfants flottants. Soyez averti en utilisant le premier exemple, si vous avez des éléments enfants en dehors de l'élément parent, ils seront masqués. Vous pouvez également utiliser «auto» comme valeur de propriété, mais cela invoquera des barres de défilement si un élément apparaît à l'extérieur.

Vous pouvez également essayer de faire flotter le conteneur parent, mais en fonction de votre conception, cela peut être impossible / difficile.


37
J'aurais aimé comprendre la logique de pourquoi débordement: fonctionne caché dans ce cas.
masteroleary

2
Oui, j'espérais que ce n'était pas seulement moi qui pensais que c'était contre-intuitif. Alex?
regularmike

3
@masteroleary @regularmike HTML/CSSn'a jamais été une bonne technologie d'interface utilisateur, donc les choses contre-intuitives sont assez courantes :)
Yuriy Nakonechnyy

2
@masteroleary Je me rends compte que c'est un vieux fil de discussion, mais j'ai récemment essayé de répondre à une question similaire sur stackoverflow.com/questions/21041297#21041625 - j'espère que cela aide
xec

1
+1 pour la floatsolution. Fonctionne très bien avec les autres échouent, en particulier lorsqu'il est associé à Twitter Bootstrap.
Fizzix

17

Tout d'abord, je vous recommande fortement de faire votre style CSS dans un fichier CSS externe, plutôt que de le faire en ligne. C'est beaucoup plus facile à maintenir et peut être plus réutilisable en utilisant des classes.

En travaillant sur la réponse d'Alex (et le clearfix de Garret) "ajouter un élément à la fin avec clear: both", vous pouvez le faire comme ceci:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Cela fonctionne (mais comme vous pouvez le voir, le CSS en ligne n'est pas si joli).


Pourquoi ai-je été noté à la baisse? Cela fonctionne, et j'ai reconnu à juste titre que ce n'était pas une jolie solution.
Lycana

1
Je ne suis pas sûr, j'ai attribué +1 pour vous ramener à 0 au moins. Peut-être que vous avez été rejeté parce que vous n'avez pas corrigé son CSS incorrect ... c'est-à-dire que l'utilisation du signe égal pour définir une propriété CSS est incorrecte.
alex

C'est suffisant. J'apprécie le +1 alex. Je pensais que ma déclaration était juste.
Lycana

Cette solution est meilleure IMO. J'aurais accepté cette réponse si c'était ma question.
ksg91


7

Je sais que certaines personnes me détesteront, mais j'ai trouvé display:table-cellde l'aide dans ce cas.

C'est vraiment plus propre.


affichage d'utilisation de div externe: table; et à l'intérieur de div use display: table-cell;
Anukul Limpanasil le

4

Tout d'abord, vous n'utilisez pas width=300pxce paramètre d'attribut pour la balise et non CSS, utilisez width: 300px;plutôt.

Je suggérerais d'appliquer la clearfixtechnique sur le #outerdiv. Clearfix est une solution générale pour effacer 2 div flottants afin que le div parent se développe pour accueillir les 2 div flottants.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Voici un exemple de votre situation et de ce que Clearfix fait pour la résoudre.


3

Utilisez jQuery:

Définissez Parent Height = Child offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

3
Overkill, quand vous pouvez le faire avec CSS seul.
alex le

1
Avec ma réponse, vous pouvez définir la hauteur du parent comme la hauteur de l'enfant, mais en utilisant le débordement, nous ne modifions pas la hauteur du parent, ce qui créera un problème si nous affichons des données après la div parent.
Harpal

1

Utilisation clear: both;

J'ai passé plus d'une semaine à essayer de comprendre cela!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.