CSS Parent DIV Débordement

J'ai un problème avec un site Web que je prépare. J'ai une disposition div simple. Ce qui est la suivante:CSS Parent DIV Débordement

<body> 
    <div id="Container"> 
     <div id="Logo"></div> 

     <div id="Banner"> 
      <div id="Nav"></div> 
     </div> 
     <div id="Content"> 
     </div> 

     <div id="footer">Footer</div> 
    </div> 
</body>

Et mon CSS est la suivante:

@charset "utf-8"; 
/* CSS Document */ 


html, body { 
    height:100%; 
    padding:0; 
    margin:0; 
    background-image:url(../layout.img/background_gradient.gif); 
    background-repeat:repeat-x; 
} 

#Container { 
    height:100%; 
    width:950px; 
    margin:auto; 

    background-color:#FFFFFF; 
    border-left:1px solid #333333; 
    border-right:1px solid #333333; 
} 

#Logo { 
    width:160px; 
    height:160px; 
    float:right; 
} 

#Banner { 
    width:100%; 
    height:160px; 
} 

#Nav { 
    width:550px; 
    height:33px; 
    position:relative; 
    top:100px; 
    left:50px; 
} 

#Content { 
    clear:both; 
}

Et enfin, le résultat peut être vu ici:

http://jsfiddle.net/mczMS/

Comme vous peut voir le div 'conteneur' ne s'étend pas avec le contenu que vous faites défiler la page. Je sais que c'est probablement quelque chose de stupidement simple mais je manque de puissance cérébrale aujourd'hui. Haha.

Source

2009-11-19 Ben

Essayez d'ajouter:

#container { min-height: 100%; }

après hauteur de 100%. Vous pouvez également essayer:

#container { overflow: auto; }

Source

2009-11-19 03:58:15 cletus

Nice! A travaillé magnifiquement. Merci pour ça! – Ben

Si vous supprimez la hauteur: 100% du récipient, il s'ajustera son contenu.

Source

2009-11-19 03:59:41 Deeksy

Je suppose que la hauteur est censée être de 100% si elle est inférieure à la hauteur totale cependant. – cletus

Répondre

Questions connexes