web-dev-qa-db-fra.com

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

Je veux que le div extérieur, qui est en noir, enveloppe son divs flottant en son sein. Je ne veux pas utiliser style='height: 200px dans div avec le outerdiv id comme je le veux automatiquement comme hauteur de son contenu (par exemple, le divs flottant).

<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?

csshtmlcss-float
91
Jase Whatson

Vous pouvez définir le CSS de outerdiv sur cette

#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. Ceci peut être ajouté normalement, avec JS (pas une bonne solution) ou avec :after Pseudo-élément CSS (peu pris en charge par les anciens IE).

Le problème est que les conteneurs ne se développeront pas naturellement pour inclure les 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 appellera 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 selon votre conception, cela peut être impossible/difficile.

157
alex

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 (& clearfix de Garret): "ajouter un élément à la fin avec clear: both", vous pouvez le faire comme suit:

    <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, CSS en ligne n'est pas si joli).

14
Lycana

Vous voudrez peut-être essayer des flotteurs à fermeture automatique, comme indiqué en détail sur http://www.sitepoint.com/simple-clearing-of-floats/

Alors peut-être essayer soit overflow: auto (fonctionne habituellement), ou overflow: hidden, comme disait Alex.

7
DarkWulf

Je sais que certaines personnes vont me détester, mais j'ai trouvé display:table-cell pour aider dans ce cas.

C'est vraiment plus propre.

4
Nande

Tout d'abord, vous n'utilisez pas width=300px c'est un paramètre d'attribut pour la balise, pas CSS, utilisez width: 300px; au lieu.

Je suggérerais d'appliquer la technique clearfix sur le #outerdiv. Clearfix est une solution générale pour supprimer 2 divs flottantes afin que la division parent s'agrandisse pour accueillir les 2 divs flottantes.

<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
Garrett

Utilisez jQuery:

Définir la hauteur du parent = Enfant offsetHeight.

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

Utilisation clear: both;

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

0
Ronan D. Connolly