Définition de plusieurs divs par pourcentage de hauteur pour remplir la division parente

Question

J'ai une div parente avec un ensemble hauteur/largeur max. Je me demandais s'il est possible de régler les deux divs enfants pour ajuster automatiquement leur taille en fonction d'un pourcentage en utilisant simplement CSS?

HTML:

<div id="parent"> 
    <div id="top"></div> 
    <div id="bottom"></div> 
</div> 

CSS:

html, body { 
    height: 100%; 
    width: 100%: 
}  

#parent { 
    max-width: 400px; 
    max-height: 600px; 
} 

#top { 
    height: 30%; 
} 

#bottom { 
    height: 70%; 
} 

La mise en œuvre prévue de ce serait pour un affichage mobile qui remplit la hauteur de l'écran proportionnellement sans forcer un défilement vertical.

EDIT: Je réalise maintenant que les pourcentages de hauteur du parent fonctionneront si vous avez une hauteur parentale fixe. La question est toujours de savoir s'il existe un moyen d'utiliser CSS pour permettre une hauteur flexible qui correspond à la taille de l'écran. Il semble que ce ne sera pas possible uniquement en utilisant CSS et nécessite une intervention de JS.

Answer 1

Il n'y a rien de mal avec votre code. Juste ajouter une hauteur de 100% ainsi que la largeur aux divs donne ce que vous voulez. La largeur maximale/hauteur ne force aucune valeur (quitte la hauteur/largeur à l'auto). Voici un violon de travail:

http://jsfiddle.net/b6HVa/

#parent { 
    width: 100%; 
    height: 100%; 
    max-height: 600px; 
    max-witdh: 400px; 
} 

Answer 2

Je pense que vous faites bien, si quelque chose ne va pas, s'il vous plaît montrer une démo. Ou essayez de définir

#top{max-height: 30%;} 
#bottom{max-height: 70%;} 

Ou ajoutez min-height: {some value}px; à votre div.