J'ai une mise en page avec deux colonnes : une colonne de gauche et une colonne de droite. div et un droit div .
Le droit div a un gris background-color et j'ai besoin qu'il s'étende verticalement en fonction de la hauteur de la fenêtre du navigateur de l'utilisateur. Actuellement, la fenêtre background-color se termine par le dernier élément de contenu dans ce div .
J'ai essayé height:100% , min-height:100%; etc.
Il existe deux unités de mesure CSS 3 appelées :
Extrait de la recommandation du candidat W3 ci-dessus :
Les longueurs de pourcentage de la fenêtre d'affichage 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), vw (largeur de la fenêtre), vmin (longueur minimale de la fenêtre) et vmax (longueur maximale de la fenêtre).
Pour cette question, nous pouvons utiliser vh : 1vh est égale à 1 % de la hauteur de la fenêtre d'affichage. C'est-à-dire que 100vh est égale à la hauteur de la fenêtre du navigateur, quelle que soit la position de l'élément dans l'arbre DOM :
<div></div>div {
height: 100vh;
}C'est littéralement tout ce qu'il faut. Voici un Exemple de JSFiddle de cela en service.
Cette fonction est actuellement prise en charge par tous les principaux navigateurs à jour, à l'exception d'Opera Mini. Consultez Puis-je utiliser... pour un soutien supplémentaire.
Dans le cas de la question à l'étude, qui comporte un séparateur gauche et un séparateur droit, voici un exemple de l'utilisation d'un séparateur gauche. Exemple de JSFiddle montrant une mise en page à deux colonnes impliquant les deux vh y vw .
100vh différent de 100% ?Prenez cette mise en page par exemple :
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>El p est réglée à une hauteur de 100 %, mais parce que la balise qui la contient div a une hauteur de 200 pixels, 100% de 200 pixels devient 200 pixels, pas 100% de la body hauteur. Utilisation de 100vh signifie plutôt que le p sera à 100% de la hauteur de la balise body quel que soit le div hauteur. Jetez un coup d'œil à ce qui suit accompagnant JSFiddle pour voir facilement la différence !
Comportement étrange avec le défilement lorsque l'élément est en fait plus haut que la fenêtre d'affichage. Le conteneur conserve la hauteur de la fenêtre d'affichage et le contenu sort du conteneur. min-height:100vh semble permettre de contourner ce problème.
Viewport-Percentage est loin de bénéficier d'un soutien suffisant pour être utilisé dans un environnement de production. Vous devez écrire une solution de repli à chaque fois, ce qui finit par créer plus de désordre que si vous n'aviez tout simplement pas utilisé VP.
@DGDD à la suite : il y a beaucoup d'autres solutions ici qui fonctionnent dès IE5, il n'était donc pas nécessaire pour moi de répéter ce que d'autres ont déjà dit. Cette réponse est suffisamment solide pour la majorité des navigateurs publiés au cours des trois dernières années depuis l'introduction de la spécification.
Corrigez-moi si je me trompe, mais je pense que vous devez également définir la hauteur de tous les parents de la division pour que cela fonctionne.
Cela ne fonctionnera pas si j'utilise un design continu : page de 6000px de hauteur, avec des blocs représentant les pages. Je veux qu'un bloc ait exactement la hauteur de la fenêtre d'affichage.
@DanyY, vous avez raison. Vous devez définir la hauteur de tous les parents de la division, ce qui implique que tout a la hauteur de l'écran. Voici un exemple exemple .
Cela fonctionne en sortant l'élément du flux du document et en fixant sa valeur inférieure à la hauteur de son parent. Ce n'est pas idéal lorsque votre contenu dépasse la hauteur de son parent.
Toutes les autres solutions, y compris celle qui a reçu le plus de votes, avec vh sont sous-optimales par rapport à l'approche de l modèle flexible solution.
Avec l'avènement de la Modèle CSS flex la résolution du problème de la hauteur à 100 % devient très, très facile : utilisez height: 100%; display: flex sur le parent, et flex: 1 sur les éléments enfants. Ils occuperont automatiquement tout l'espace disponible dans leur conteneur.
Notez à quel point le balisage et le CSS sont simples. Pas de bidouillage de tableaux ou autre.
Le modèle de flexion est supporté par tous les principaux navigateurs ainsi que IE11+.
html, body {
height: 100%;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>En savoir plus sur le modèle flexible ici.
Un mot d'avertissement : lorsque le contenu de l'un des conteneurs gauche/droite dépasse la hauteur originale du corps, le conteneur opposé ne sera pas redimensionné, de sorte que les conteneurs se retrouvent avec des hauteurs différentes.
Tu ne mentionnes pas quelques détails importants comme.. :
Voici une possibilité :
body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
width: 960px; // width optional
}
#left {
background: yellow;
float: left;
width: 360px; // width optional but recommended
}
#right {
background: grey;
margin-left: 360px; // must agree with previous width
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</body>
</html>Il existe de nombreuses variantes de ce système, en fonction des colonnes qui doivent être fixées et de celles qui sont liquides. Vous pouvez également le faire avec un positionnement absolu, mais j'ai généralement obtenu de meilleurs résultats (notamment en termes d'inter-navigation) en utilisant des flotteurs.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
9 votes
Cette question peut vous être utile stackoverflow.com/questions/1366548/
0 votes
C'est une bonne solution, mais les unités vh, vw etc. sont connues pour être boguées. Il y a cette alternative légère en js si vous en avez besoin : joaocunha.github.io/vunit
0 votes
Voici une explication simple et claire de la CSS
heightavec des valeurs en pourcentage : stackoverflow.com/a/31728799/359727613 votes
Vous pouvez utiliser height : 100vh ; propriété css
0 votes
Essayez d'utiliser celle-ci Hauteur minimale : 100vh