Il existe quelques unités de mesure CSS 3 appelées:
Quelles sont les longueurs de pourcentage de fenêtre?
De la recommandation du candidat W3 liée ci-dessus:
Les longueurs en pourcentage de la fenêtre sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, elles sont mises à l'échelle en conséquence.
Ces unités sont vh
(hauteur de la fenêtre d'affichage), vw
(largeur de la fenêtre d'affichage), vmin
(longueur minimale de la fenêtre d'affichage) et vmax
(longueur maximale de la fenêtre d'affichage).
Comment cela peut-il être utilisé pour qu'un diviseur remplisse la hauteur du navigateur?
Pour cette question, nous pouvons utiliser vh
: 1vh
est égal à 1% de la hauteur de la fenêtre. Autrement dit, 100vh
est égal à la hauteur de la fenêtre du navigateur, quel que soit l'emplacement de l'élément dans l'arborescence DOM:
HTML
<div></div>
CSS
div {
height: 100vh;
}
C'est littéralement tout ce qu'il faut. Voici un exemple JSFiddle de cela en cours d'utilisation.
Quels navigateurs prennent en charge ces nouvelles unités?
Ceci est actuellement pris en charge sur tous les principaux navigateurs mis à jour, à l'exception d'Opera Mini. Consultez Puis-je utiliser ... pour plus d'assistance.
Comment cela peut-il être utilisé avec plusieurs colonnes?
Dans le cas de la question en question, comportant un diviseur gauche et un diviseur droit, voici un exemple JSFiddle montrant une disposition en deux colonnes impliquant à la fois vh
et vw
.
En quoi est-ce 100vh
différent de 100%
?
Prenez cette disposition par exemple:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
La p
balise ici est définie sur 100% de hauteur, mais comme son conteneur div
a une hauteur de 200 pixels, 100% de 200 pixels devient 200 pixels, et non 100% de la body
hauteur. Utiliser à la 100vh
place signifie que la p
balise aura 100% de hauteur body
quelle que soit la div
hauteur. Jetez un oeil à ce JSFiddle d'accompagnement pour voir facilement la différence!