Comment faire une div 100% hauteur de la fenêtre du navigateur
J'ai une mise en page avec deux colonnes - une gauche div et une droite div.
La droite div a le gris background-color, et j'ai besoin de l'étendre verticalement en fonction de la hauteur de la fenêtre du navigateur de l'utilisateur. À l'heure actuelle, le background-color se termine par le dernier élément de contenu de cette div.
J'ai essayé height:100%, min-height:100%;, etc.
Il existe deux unités de mesure CSS 3 appelées:
Viewport-Pourcentage (ou Viewport-Relative) Longueurs
Que sont les longueurs de pourcentage de la fenêtre de visualisation?
De la recommandation du candidat W3 liée ci-dessus:
Les longueurs de pourcentage de la vue sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, ils sont mis à 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).
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 d'affichage. Autrement dit, 100vh est égal à la hauteur de la fenêtre du navigateur, quel que soit le lieu où l'élément est situé dans l'arborescence DOM:
HTML
<div></div>
CSS
div {
height: 100vh;
}
C'est littéralement tout ce qui est nécessaire. Voici un exemple JSFiddle utilisé.
Quels navigateurs supportent ces nouvelles unités?
Ceci est actuellement supporté par tous les principaux navigateurs mis à jour, à l'exception de Opera Mini. Départ Puis-je utiliser ... pour davantage d'assistance.
Comment cela peut-il être utilisé avec plusieurs colonnes?
Dans le cas de la question à traiter, comportant un séparateur gauche et un séparateur droit, voici un exemple de JSFiddle montrant une mise en page sur deux colonnes associant vh et vw.
En quoi 100vh est-il différent de 100%?
Prenons cette disposition par exemple:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
La balise p est définie ici à 100% de hauteur, mais comme elle contient div une hauteur de 200 pixels, 100% des 200 pixels deviennent 200 pixels, et non 100% de la body hauteur. Utiliser 100vh à la place signifie que la balise p aura une hauteur de 100% de la body quelle que soit la hauteur de div. Jetez un coup d'oeil à ceci accompagnant JSFiddle pour voir facilement la différence!
Si vous souhaitez définir la hauteur d'un <div> ou de tout élément, vous devez également définir la hauteur de <body> et <html> à 100%. Ensuite, vous pouvez définir la hauteur de l'élément avec 100% :)
Voici un exemple:
body, html {
height: 100%;
}
#right {
height: 100%;
}
Si vous pouvez absolument positionner vos éléments,
position: absolute;
top: 0;
bottom: 0;
le ferait.
Vous pouvez utiliser l’unité view-port en CSS:
HTML:
<div id="my-div">Hello World!</div>
CSS:
#my-div {
height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
Vous pouvez utiliser vh dans ce cas, qui est relatif à 1% de la hauteur de la fenêtre d'affichage ...
Cela signifie que si vous voulez couvrir la hauteur, utilisez simplement 100vh.
Regardez l'image que je dessine pour vous ici:
Essayez l'extrait que j'ai créé pour vous comme ci-dessous:
.left {
height: 100vh;
width: 50%;
background-color: grey;
float: left;
}
.right {
height: 100vh;
width: 50%;
background-color: red;
float: right;
}<div class="left"></div>
<div class="right"></div>Toutes les autres solutions, y compris celle citée par le haut avec vh, sont sous-optimales par rapport à la solution modèle flex .
Avec l'avènement de modèle flex CSS , résoudre le problème de la hauteur de 100% devient très, très simple: utilisez height: 100%; display: flex sur le parent et flex: 1 sur les éléments enfants. Ils prendront automatiquement tout l'espace disponible dans leur conteneur.
Notez à quel point le balisage et les CSS sont simples. Pas de hack de table ou quoi que ce soit.
Le modèle flex 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 flex ici.
Vous ne mentionnez pas quelques détails importants comme:
- La disposition est-elle largeur fixe?
- Est-ce que l'une ou les deux colonnes ont une largeur fixe?
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 variations à ce sujet en fonction des colonnes à fixer et des colonnes liquides. Vous pouvez le faire avec un positionnement absolu mais j'ai généralement trouvé de meilleurs résultats (en particulier en termes de navigation sur plusieurs navigateurs) en utilisant des flottants.
C'est ce qui a fonctionné pour moi:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>Utilisez position:fixed au lieu de position:absolute de cette manière, même si vous faites défiler la division vers le bas, l’agrandissement se poursuit jusqu’à la fin de l’écran.
Voici un correctif pour la hauteur.
Dans votre CSS, utilisez:
#your-object: height: 100vh;
Pour les navigateurs qui ne prennent pas en charge vh-units, utilisez modernizr.
Ajouter ce script (pour ajouter une détection pour vh-units)
// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
var bool;
Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {
var height = parseInt(window.innerHeight/2,10),
compStyle = parseInt((window.getComputedStyle ?
getComputedStyle(elem, null) :
elem.currentStyle)["height"],10);
bool= !!(compStyle == height);
});
return bool;
});
Enfin, utilisez cette fonction pour ajouter la hauteur de la fenêtre à #your-object si le navigateur ne prend pas en charge vh-units:
$(function() {
if (!Modernizr.cssvhunit) {
var windowH = $(window).height();
$('#your-object').css({'height':($(window).height())+'px'});
}
});
100% fonctionne différemment pour la largeur et la hauteur.
Lorsque vous spécifiez width: 100%, cela signifie "occupe 100% de la largeur disponible à partir de l'élément parent ou de la largeur de la fenêtre".
Lorsque vous spécifiez height: 100%, cela signifie simplement "prendre 100% de la hauteur disponible de l'élément parent". Cela signifie que si vous ne spécifiez pas de hauteur dans un élément de niveau supérieur, la hauteur de tous les enfants sera soit 0, soit la hauteur du parent. C'est pourquoi vous devez définir l'élément le plus haut pour avoir un min-height de la hauteur de la fenêtre.
Je spécifie toujours que le corps doit avoir une hauteur minimale de 100vh, ce qui facilite le positionnement et les calculs,
body {
min-height: 100vh;
}
Ajoutez min-height: 100% et ne spécifiez pas de hauteur (ou ne la mettez pas sur auto). Cela a totalement fait le travail pour moi:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
100vw === 100% de la largeur de la fenêtre.
100vh === 100% de la hauteur de la fenêtre.
Si vous voulez définir la largeur ou la hauteur de div à 100% de la taille de la fenêtre du navigateur, vous devez utiliser:
Pour la largeur: 100vw
Pour la hauteur: 100vh
Ou, si vous souhaitez définir une taille plus petite, utilisez la fonction CSS calc. Exemple:
#example {
width: calc(100vw - 32px)
}
Cela a fonctionné pour moi:
html, body {
height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}
#wrapper {
min-height: 100%; /* Minimum height for a modern browser */
height:auto !important; /* Important rule for a modern browser */
height:100%; /* Minimum height for Internet Explorer */
overflow: hidden !important; /* Firefox scroll-bar */
}
Tiré de cette page .
Plusieurs méthodes sont disponibles pour régler la hauteur d’un <div> à 100%.
Méthode (A):
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100%;
width: 50%;
background: green;
}
.div-right {
height: 100%;
width: 50%;
background: gray;
}<div class="div-left"></div>
<div class="div-right"></div>Méthode (B) utilisant vh:
html,
body {
height: 100%;
min-height: 100%;
}
.div-left {
height: 100vh;
width: 50%;
background: green;
float: left;
}
.div-right {
height: 100vh;
width: 50%;
background: gray;
float: right;
}<div class="div-left"></div>
<div class="div-right"></div>Méthode (c) utilisant flex box:
html,
body {
height: 100%;
min-height: 100%;
}
.wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
.div-left {
width: 50%;
background: green;
}
.div-right {
width: 50%;
background: gray;
}<div class="wrapper">
<div class="div-left"></div>
<div class="div-right"></div>
</div>Essayez de définir height:100% dans html & body
html,
body {
height: 100%;
}
Et si vous voulez div div height 2 même utilisation ou définir la propriété de l'élément parent display:flex.
Utilisez simplement l'unité "vh" au lieu de "px", ce qui signifie hauteur de la vue.
height: 100vh;
Voici quelque chose qui ne correspond pas exactement à ce que vous aviez dans les réponses précédentes, mais il pourrait être utile à certains:
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
La Flexbox convient parfaitement à ce type de problème. Bien que principalement connu pour la disposition du contenu dans le sens horizontal, Flexbox fonctionne tout aussi bien pour les problèmes de disposition verticale. Tout ce que vous avez à faire est d’envelopper les sections verticales dans un conteneur flexible et de choisir celles que vous souhaitez développer. Ils prendront automatiquement tout l’espace disponible dans leur conteneur.
Une des options utilise la table CSS. Il est très bien pris en charge par le navigateur et fonctionne même dans Internet Explorer 8.
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.left, .right {
display: table-cell;
width: 50%;
}
.right {
background: grey;
}<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>Les éléments de bloc consomment par défaut toute la largeur de leur parent.
C'est ainsi qu'ils répondent à leurs exigences de conception, qui consistent à empiler verticalement.
9.4.1 Contextes de formatage de bloc
Dans un contexte de formatage de bloc, les cases sont disposées les unes après les autres, verticalement, en commençant par le haut d'un bloc conteneur.
Ce comportement ne s'étend toutefois pas à la hauteur.
Par défaut, la plupart des éléments ont la hauteur de leur contenu (height: auto).
Contrairement à la largeur, vous devez spécifier une hauteur si vous souhaitez un espace supplémentaire.
Par conséquent, gardez ces deux choses à l'esprit:
- sauf si vous voulez une largeur totale, vous devez définir la largeur d'un élément de bloc.
- sauf si vous voulez la hauteur du contenu, vous devez définir la hauteur d'un élément
.Contact {
display: flex; /* full width by default */
min-height: 100vh; /* use full height of viewport, at a minimum */
}
.left {
flex: 0 0 60%;
background-color: tomato;
}
.right {
flex: 1;
background-color: pink;
}
body { margin: 0; } /* remove default margins */<div class="Contact">
<section class="left">
<div class="">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>
</section>
<section class="right">
<img />
</section>
</div>Vous pouvez utiliser display: flex et height: 100vh
html, body {
height: 100%;
margin: 0px;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}<div class="left">left</div>
<div class="right">right</div>Vous devez faire deux choses. L’une consiste à régler la hauteur à 100%, ce que vous avez déjà fait. Deuxièmement, la position est définie sur absolue. Cela devrait faire l'affaire.
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
Essayez ceci - testé:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
Essayez le CSS suivant:
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}
En fait, ce qui a le mieux fonctionné pour moi, c’était d’utiliser la propriété vh.
Dans mon application React, je voulais que la div corresponde à la hauteur de la page, même après redimensionnement. J'ai essayé height: 100%;, overflow-y: auto;, mais aucun d'entre eux n'a fonctionné lors du réglage de height:(your percent)vh;, il a fonctionné comme prévu.
Remarque: si vous utilisez un remplissage, des angles arrondis, etc., veillez à soustraire ces valeurs de votre pourcentage de propriété vh, sinon cela ajoute une hauteur supplémentaire et fait apparaître des barres de défilement. Voici mon échantillon:
.frame {
background-color: rgb(33, 2, 211);
height: 96vh;
padding: 1% 3% 2% 3%;
border: 1px solid rgb(212, 248, 203);
border-radius: 10px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
Si vous utilisez position: absolute; et jQuery, vous pouvez utiliser
$("#mydiv").css("height", $(document).height() + "px");
HTML
// vw: hundredths of the viewport width.
// vh: hundredths of the viewport height.
// vmin: hundredths of whichever is smaller, the viewport width or height.
// vmax: hundredths of whichever is larger, the viewport width or height.
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
CSS
<style>
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100vh; // Height window (vh)
}
.wrapper .left{
widht: 80%; // Width optional, but recommended
}
.wrapper .right{
widht: 20%; // Width optional, but recommended
background-color: #dd1f26;
}
<style>
Plus facile:
html,
body {
height: 100%;
min-height: 100%;
}
body {
position: relative;
background: purple;
margin: 0;
padding: 0;
}
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
width: 300px;
}<html class="">
<body>
<div class="fullheight">
This is full height.
</div>
</body>
</html>Vous pouvez utiliser le CSS suivant pour créer une div 100% de la hauteur de la fenêtre du navigateur:
display: block;
position: relative;
bottom: 0;
height: 100%;
Ce truc redimensionnera automatiquement la hauteur du contenu en fonction de votre navigateur. J'espère que cela fonctionnera pour vous. Essayez juste cet exemple donné ci-dessous.
Vous devez configurer uniquement height:100%.
html,body {
height: 100%;
margin: 0;
}
.content {
height: 100%;
min-height: 100%;
position: relative;
}
.content-left {
height: auto;
min-height: 100%;
float: left;
background: #ddd;
width: 50%;
position: relative;
}
#one {
background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll #aaa;
width: 50%;
position: relative;
float: left;
}
#two {
background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
width: 50%;
float: left;
position: relative;
overflow-y: scroll;
}<div class='content' id='one'></div>
<div class='content-left' id='two'></div>Même si cette solution est faite avec jQuery I, elle peut être utile à quiconque fait des colonnes pour s’adapter à la taille de l’écran.
Pour les colonnes commençant en haut de la page, cette solution est la plus simple.
body,html{
height:100%;
}
div#right{
height:100%
}
Pour les colonnes not commençant en haut de la page (par exemple, si elles commencent en dessous de l'en-tête).
<script>
$(document).ready(function () {
var column_height = $("body").height();
column_height = column_height - 100; // 100 is the header height
column_height = column_height + "px";
$("#column").css("height",column_height);
});
</script>
La première méthode lui applique la hauteur du corps ainsi que les colonnes, ce qui signifie qu'il s'agit de starting_pixels + height100%.
La deuxième méthode obtient la hauteur de page indiquée à l'utilisateur en obtenant la hauteur du corps, puis soustrait la taille de l'en-tête pour savoir combien de hauteur il reste pour afficher la colonne.