Hauteur: 100% ne fonctionne pas! Pourquoi?

Question

Possible en double:
CSS - 100% height doesn’t work

J'ai 3 divs, la div-1 est fond et div-2 et div-3 sont deux conteneurs (un pour le texte et une pour la photo) ceci est mon code html:

<div id="div-1"> 
    <div id="div-2"></div> 
    <div id="div-3"></div> 
</div> 

CSS:

#div-1 { 
width: 100%; 
height:100%; 
padding: 40px 0; 
margin:0; 
} 

#div-2 { 
width: 500px; 
margin: 0; 
float: left; 
} 

#div-3 { 
width: 200px; 
margin: 0; 
float: right; 
} 

ce que je reçois:

Pourquoi la hauteur: 100% ne fonctionne pas !?
Merci!

Answer 1

Cela peut fonctionner

<div id="div-1"> 
    <div id="div-2"></div> 
    <div id="div-3"></div> 
    <div style="clear:both"></div> 
</div> 

Answer 2

vous devez ajouter le flux clair après avoir application des propriétés flottantes aux éléments, plus ici: http://www.quirksmode.org/css/clearing.html

Answer 3

La hauteur de # div-1 est de 100%, mais 100 % de rien, car il repose sur la hauteur des balises parent, je crois. Essayez de régler votre corps à 100% de hauteur en CSS.

Answer 4

Supprimer height: 100%; dans #div-1 et ajouter position: absolute;. Cela fonctionnera très bien.