css height 100%

Question

Pourquoi la hauteur de la deuxième div n'est-elle pas 100px?

Maintenant, il est très long ...

<div style = "height: 300px;"> 
    <div style = "height: 300px; background-color: #000;"> 
     <div style = "height: 200px;"> 
       First div 
     </div> 
     <div style = "height: 100%; background-color: #336699;"> 
       Seconf div 
     </div> 
    </div> 
</div> 

Answer 1

height: 100%; ne remplit pas la reste de l'espace, il faut 100% du parent <div>, ce qui est 300px. Pourquoi n'utilisez-vous pas 100px?

Answer 2

cos vous avez 100% non 100px.

Answer 3

Parce que 100% signifie « 100% de la hauteur de l'élément parent » et non « 100% de l'espace laissé dans l'élément parent après tout le reste a été pris en compte »

Answer 4

C'est 100% de la hauteur de la div parente - dans ce cas 300px non 100.