Question Comment faire un div 100% hauteur de la fenêtre du navigateur?


J'ai une mise en page avec deux colonnes - une gauche div et un droit div.

La droite div a un 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. En ce moment, le background-color se termine au dernier morceau de contenu dans ce div.

J'ai essayé height:100%, min-height:100%; etc.


1681
2017-10-15 21:18


origine


Réponses:


Il y a deux unités de mesure CSS3 appelées:

Viewport-Pourcentage (ou Viewport-Relative) Longueurs

Quelles sont les longueurs de Viewport-Percentage?

De la recommandation relative au candidat W3 ci-dessus:

Les longueurs de pourcentage de viewport sont relatives à la taille du bloc conteneur initial. Lorsque la hauteur ou la largeur du bloc conteneur 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) vmax (longueur maximale de la fenêtre).

Comment cela peut-il être utilisé pour faire un diviseur remplir la hauteur du navigateur?

Pour cette question, nous pouvons faire usage de vh: 1vh est égal à 1% de la hauteur de la fenêtre. C'est-à-dire, 100vh est égale à 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 qui est nécessaire. Voici une JSFiddle exemple de cela en cours d'utilisation.

Quels navigateurs supportent ces nouvelles unités?

Ceci est actuellement pris en charge sur tous les principaux navigateurs mis à jour en dehors d'Opera Mini. Check-out Puis-je utiliser... pour un soutien supplémentaire.

Comment cela peut-il être utilisé avec plusieurs colonnes?

Dans le cas de la question à l'étude, avec un diviseur de gauche et de droite, voici un JSFiddle exemple montrant une disposition de deux colonnes impliquant les deux vh et vw.

Comment est 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>

le p tag ici est réglé à 100% de hauteur, mais parce que son contenant div a 200px hauteur, 100% de 200px devient 200px, ne pas 100% du body la taille. En utilisant 100vh signifie plutôt que le p tag sera 100% hauteur de la body quel que soit le div la taille. Regarde ça JSFiddle d'accompagnement pour voir facilement la différence!


2364
2018-05-30 13:33



Si vous voulez définir la hauteur d'un <div> ou tout élément, vous devez définir la hauteur de <body> et <html> à 100% aussi. Ensuite, vous pouvez définir la hauteur de l'élément avec 100% :)

Voici un exemple:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

520
2017-12-11 13:10



Si vous êtes en mesure de positionner absolument vos éléments,

position: absolute;
top: 0;
bottom: 0;

le ferais.


242
2017-10-15 21:31



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*/
}

127
2018-05-04 11:11



Toutes les autres solutions, y compris la plus votée avec vh sont sous-optimale par rapport à la modèle flexible Solution.

Avec l'avènement du Modèle CSS flex, résoudre le problème de hauteur de 100% devient très, très facile: utiliser height: 100%; display: flexsur le parent, et flex: 1 sur les éléments de l'enfant. Ils prendront automatiquement tout l'espace disponible dans leur conteneur.

Notez à quel point le balisage et le CSS sont simples. Pas de hacks de table ou quoi que ce soit.

Le modèle flexible est pris en charge 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.


85
2018-06-12 14:14



Vous ne mentionnez pas quelques détails importants comme:

  • La largeur de la mise en page est-elle fixe?
  • L'une des colonnes ou les deux sont-elles réparties en largeur?

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 selon les colonnes qui doivent être fixées et celles qui sont liquides. Vous pouvez le faire avec un positionnement absolu aussi, mais j'ai généralement trouvé de meilleurs résultats (en particulier en termes de navigateur croisé) en utilisant des flottants à la place.


47
2017-10-15 23:13



Vous pouvez utiliser vh dans ce cas qui est relatif à 1% de la hauteur de la fenêtre.

Cela signifie que si vous voulez couvrir la hauteur, il suffit d'utiliser 100vh.

Regardez l'image que je dessine pour vous ici:

How to make a div 100% height of the browser window?

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>


40
2018-06-03 17:43



Voici une solution pour la hauteur.

Dans votre utilisation CSS:

#your-object: height: 100vh;

Pour les navigateurs qui ne supportent pas vh-units, utilisez modernizr.

Ajoutez ce script (pour ajouter la 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 supporte pas vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

25
2017-08-21 16:57



C'est ce qui a fonctionné pour moi:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

Utilisation position:fixed au lieu de position:absolute, de cette façon, même si vous faites défiler la division s'étendra à la fin de l'écran.


24
2017-07-27 16:18