Comment faire un div de grandir en hauteur tout en ayant des flotteurs à l'intérieur

Comment puis-je faire un div augmenter sa hauteur, quand il a flotte à l'intérieur de celui-ci? Je sais que de définir une valeur pour la largeur et la définition de dépassement d'œuvres cachées. Le problème est que j'ai besoin d'un div avec le débordement visible. Des idées?

InformationsquelleAutor pedrozath | 2011-01-05
  1. 271

    overflow:auto; sur la div contenant le rend tout à l'intérieur de celui-ci (même flotté éléments) visible et de l'extérieur div pleinement s'articule autour d'eux. Voir cet exemple:

    CSS:

    .wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

    HTML:

    <div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

    • Oui, ça fonctionne, mais il a le danger de générer des barres de défilement.. droit?
    • Non, pas que je sache @pedro. La div extérieure doit juste continuer à augmenter à envelopper l'intérieur de la vrd. essayez-la dans le de violon, d'augmenter les dimensions de l'intérieur de divs et voir ce qui se passe.
    • J'ai essayé et une petite barre de défilement sur 2em haut est apparu sur le droit de la fenêtre du navigateur.
    • ce qui se passait pour moi parce que j'ai été forcer la hauteur du conteneur (où le overflow a été ajouté). Il fixe par retrait de la overflow: auto; de la classe, ainsi que le height sélecteur
    • Merci. Vous avez sauvé ma vie 🙂
    InformationsquelleAutor JakeParis
  2. 14

    Il n'y a plus d'une façon d'effacer les flotteurs. Vous pouvez vérifier quelques-uns ici:

    http://work.arounds.org/issue/3/clearing-floats/

    E. g., clear:both pourrait fonctionner pour vous

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

#element { zoom:1; }
    • L'avantage de cette approche est que overflow: auto; va clip de contenu (comme les focus décorations) que le trop-plein à l'extérieur de l'élément, mais ce ne sera pas.
    • overflow:auto créé une barre de défilement horizontale pour moi, donc je ne pouvais pas l'utiliser. Cela a fonctionné parfaitement.
    • Exactement ce que je cherchais. Appliqué cette CSS pour le parent. Il augmente la hauteur de la parent <div>, de sorte que le flottait élément reste à l'intérieur. Élégant, parce qu'il indique clairement que: "le fond du parent doit effacer le flotteur."
    InformationsquelleAutor Nikita Rybak
  3. 11

    Dans de nombreux cas, overflow: auto; sera suffisant, mais pour le bien de l'achèvement et de la croix-prise en charge du navigateur, jetez un oeil à Clearfix qui va faire le travail pour tous les navigateurs.

    Laisse envisager le balisage suivant..

    <div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

    Avec les styles suivants..

    .content { float:left; }

    .clearfix { ..from link.. }

    Sans clearfix, le parent div n'y aurait pas une hauteur grâce à flotter enfants. Le clearfix va faire le parent considère le flottant enfants.

    • Clearfix est extra balisage. Simplement donner la div parent le balisage overflow: auto;
    InformationsquelleAutor miphe
  4. 7

    J'ai pensé qu'une excellente façon de le faire est de fixer display: table sur la div.

    InformationsquelleAutor pedrozath