web-dev-qa-db-fra.com

Div ne pas ajuster la hauteur en fonction du contenu

Je n'arrive pas à comprendre pourquoi mon div info-container ne va pas ajuster sa hauteur en fonction de son contenu. J'ai un div flottant à l'intérieur et je pense que cela pourrait causer le problème, mais je ne suis pas complètement sûr. J'ai un lien vers jsfiddle où vous pouvez voir le CSS et du HTML si cela aide. Toute aide est grandement appréciée!

Voici le CSS de l'ID du conteneur d'informations contenant le flotteur et toutes les autres informations

    #info-container{
    position:relative;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    margin-left:auto;
    margin-right:auto;
    background:#6F90A2;
    min-width:1000px;
    max-width:1000px;
    clear: both;
    height:auto;
}

http://jsfiddle.net/r35K4/

htmlcsscss-floatheight
10
Tyharo

Ajouter overflow:auto; à #info-container.

exemple jsFiddle

Faire flotter l'élément enfant le supprime du flux de documents et le parent se réduira. En ajoutant la règle de débordement, le comportement souhaité est restauré.

42
j08691
#info-container{
    overflow: auto;
}
6
Anisuzzaman Khan

Vous avez besoin de ce que l'on appelle le clearfix CSS. Ceci peut être réalisé avec le CSS suivant.

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

Exemple de travail

Cela créera un pseudo-élément qui forcera le wrapper à envelopper les enfants flottants.

Il s'agit sans doute d'une solution plus propre que l'ajout d'une propriété overflow, car la propriété overflow a d'autres utilisations et, selon le cas, peut provoquer des problèmes de débordement masqué ou de barres de défilement internes.

4
Alexander O'Mara

démo jsBin

Créez une classe CSS:

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

et appliquez-le simplement à votre

<div id="info-container" class="clear">

ou à tout autre élément contenant Floated éléments avec lesquels vous rencontrez des problèmes.

overflow : auto;

pour tout élément parent contenant des enfants flottants, si vous êtes en mesure de le faire car cela deviendra un débordement élément

2
Roko C. Buljan