2141

J'ai une mise en page avec deux colonnes - une gauche divet une droite div.

La droite diva un gris background-color, et j'en ai besoin pour agrandir verticalement en fonction de la hauteur de la fenêtre du navigateur de l'utilisateur. En ce moment, la background-colorfin de la dernière partie de contenu dans cela div.

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

html css height

— Mike
source

7

— Puissiez-

Bon chemin à parcourir, mais les unités vh, vw etc. sont connues pour être boguées. Il y a cette alternative js légère si vous en avez besoin: joaocunha.github.io/vunit

— voir plus

Voici une explication simple et claire de la heightpropriété CSS avec des valeurs de pourcentage: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

vous pouvez utiliser la hauteur: 100vh; propriété css

— Vishnu Chauhan

2835

Il existe quelques unités de mesure CSS 3 appelées:

Longueurs de pourcentage de la fenêtre (ou relatives à la fenêtre )

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: 1vhest égal à 1% de la hauteur de la fenêtre. Autrement dit, 100vhest é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 vhet 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 pbalise ici est définie sur 100% de hauteur, mais comme son conteneur diva une hauteur de 200 pixels, 100% de 200 pixels devient 200 pixels, et non 100% de la bodyhauteur. Utiliser à la 100vhplace signifie que la pbalise aura 100% de hauteur bodyquelle que soit la divhauteur. Jetez un oeil à ce JSFiddle d'accompagnement pour voir facilement la différence!

— James Donnelly
source

35

Comportement étrange avec défilement lorsque l'élément est en fait plus haut que la fenêtre. Le conteneur maintient la hauteur de la fenêtre d'affichage et le contenu sort du conteneur. min-height:100vhsemble contourner cela.

— wdm

8

@DGDD cela fonctionne sur iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 et IEMobile 10.0. Je ne sais pas à quel navigateur mobile vous faites référence, mais ces 4 représentent plus de 90% des navigateurs mobiles utilisés. Cette question ne spécifie pas une exigence pour travailler sur les navigateurs mobiles.

— James Donnelly

1

@ robross0606 encore une fois ce n'est pas la question à laquelle j'ai répondu ici. C'est une question complètement différente, dont la réponse utilise en effet flexbox: stackoverflow.com/questions/90178/…

— James Donnelly

1

@JamesDonnelly Oui, je sais. Mais ce n'est pas la réponse à cette question. La hauteur de la fenêtre du navigateur inclut la hauteur de la barre de navigation. Ce serait mieux, car sur les navigateurs mobiles, la hauteur de la fenêtre d'affichage change à chaque fois que la barre de navigation s'affiche / se cache.

— RedClover

3

Alerte mobile: utiliser vh mess avec Chrome mobile qui ne prend pas en compte sa barre de navigation. Il couvre ensuite le haut de votre page avec. Un problème sérieux si vous avez un menu là-bas ...

— Offirmo

568

Si vous souhaitez définir la hauteur d'un <div>ou de n'importe quel é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%;
}

— Ariona Rian
source

109

Corrigez-moi si je me trompe, mais je pense que vous devez également régler la hauteur de tous les parents de la div, pour vraiment travailler

— Dany Y

Cela ne fonctionnera pas si j'utilise la conception continue: hauteur de la page 6000px, avec des blocs représentant les pages. Je veux qu'un bloc soit exactement à la hauteur de la fenêtre.

— Qwerty

@DanyY, vous avez raison. Vous devez définir la hauteur de tous les parents du div, avec les implications de tout ce qui a la hauteur de l'écran. Voici un exemple .

— toto_tico

Cette astuce fonctionne pour certains cas, mais pas pour certains cas également.Si vous recherchez une compatibilité ou une méthode plus recommandée, vous pouvez afficher la réponse de @ James ci-dessus :) Utilisation de la méthode de pourcentage de la fenêtre d'affichage :), cela devrait également fonctionner. cheers

— Ariona Rian

8

@Qwerty, voici la solution. Set css donc: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Donc, si vous avez 3 sections, ce serahtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

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

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

le ferait.

— Tinister
source

16

Cela fonctionne en retirant l'élément du flux de documents et en cimentant 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.

— Ricky Boyce

1

Cela ne fonctionne pas lorsque l'un de ses parents est défini sur position:relativeet que sa hauteur n'est pas de 100% de la fenêtre d'affichage. Il ajustera le haut et le bas à son prochain ancêtre relatif ou absolu.

— Seika85

141

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

— MrGeek
source

1

@Lamar Vous devez utiliser * { box-sizing: border-box; }pour empêcher que cela se produise.

— Luca Steeb

2

Il vaut la peine de vérifier caniuse pour la prise en charge du navigateur sur les unités de fenêtre: caniuse.com/#feat=viewport-units

— Dave Everitt

133

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

Cela signifie que si vous souhaitez couvrir la hauteur, utilisez simplement 100vh.

Regardez l'image ci-dessous 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>

Développer l'extrait

— Alireza
source

Donner 100vh a ajouté un défilement vertical pour la page, donc a suivi celui-ci mais n'a pas fonctionné. stackoverflow.com/questions/44645465/… . Existe-t-il un moyen d'éviter le défilement vertical et d'avoir le div touche le fond sans aucun contenu?

— DILEEP THOMAS

@DILEEPTHOMAS cherche l'existantpaddings/margins

— Legends

@Legends dans le fichier racine, j'ai essayé de donner comme * {margin: 0, padding: 0} mais

— n'a

1

@DILEEPTHOMAS jetez un œil à cet exemple fourni ici par Alireza, il a également une barre de défilement car l'élément body a une marge. Si vous supprimez la marge, la barre de défilement a disparu. Cela peut avoir différentes causes, mais celle-ci, je voudrais d'abord vérifier.

— Legends

102

Toutes les autres solutions, y compris celle la mieux notée avec, vhsont sous-optimales par rapport à la solution du modèle flexible .

Avec l'avènement du modèle CSS flex , la résolution du problème de hauteur à 100% devient très, très facile: utilisation height: 100%; display: flexsur le parent et flex: 1sur les éléments enfants. Ils occuperont automatiquement tout l'espace disponible dans leur conteneur.

Notez la simplicité du balisage et du CSS. Pas de piratage de table ou quoi que ce soit.

Le modèle flex 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>

Développer l'extrait

En savoir plus sur le modèle flex ici.

— Airen
source

3

un mot d'avertissement: lorsque le contenu de l'un des conteneurs gauche / droit dépasse la hauteur du corps d'origine, le conteneur opposé ne sera pas redimensionné, de sorte que les conteneurs se retrouvent alors avec des hauteurs différentes.

— schellmax

1

Exemple du problème signalé par Schellmax: jsfiddle.net/Arete/b4g0o3pq

— Arete

Selon la conception, overflow-y: auto;peut éviter que "les conteneurs dépassent la hauteur d'origine du corps".

— Evi Song

54

Vous ne mentionnez pas quelques détails importants comme:

La disposition est-elle de largeur fixe?
Les colonnes ou les deux sont-elles de 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>

Développer l'extrait

Il existe de nombreuses variantes selon les colonnes à fixer et celles qui sont liquides. Vous pouvez également le faire avec un positionnement absolu, mais j'ai généralement trouvé de meilleurs résultats (en particulier en termes de cross-browser) en utilisant des flotteurs à la place.

— cletus
source

34

C'est ce qui a fonctionné pour moi:

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

Développer l'extrait

Utilisez position:fixedau lieu de position:absolute, de cette façon, même si vous faites défiler vers le bas, la division s'étendra jusqu'à la fin de l'écran.

— Majda
source

Ce code avec la "position: [fixe | absolu]" est idéal pour les arrière-plans des fenêtres contextuelles (comme lorsque vous cliquez pour agrandir une image) mais pas si sûr dans les cas où vous devez réellement faire défiler vers le bas. Pâte toujours utile!

— Mannyfatboy

29

Voici un correctif pour la hauteur.

Dans votre utilisation CSS:

#your-object: height: 100vh;

Pour les navigateurs qui ne prennent pas en charge vh-units, utilisez modernizr.

Ajouter ce script (pour ajouter la détection 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 d'affichage #your-objectsi le navigateur ne prend pas en charge vh-units:

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

— Jonas Sandstedt
source

24

100% fonctionne différemment pour la largeur et la hauteur.

Lorsque vous spécifiez width: 100%, cela signifie «occuper 100% de la largeur disponible de l'élément parent ou de la largeur de la fenêtre».

Lorsque vous spécifiez height: 100%, cela signifie uniquement «occuper 100% de la hauteur disponible de l'élément parent». Cela signifie que si vous ne spécifiez pas de hauteur à un élément de niveau supérieur, la hauteur de tous les enfants sera soit la 0hauteur du parent, soit la hauteur, et c'est pourquoi vous devez définir l'élément le plus haut pour avoir une min-heighthauteur de fenêtre.

Je spécifie toujours que le corps doit avoir une hauteur minimale de 100vh et cela facilite le positionnement et les calculs,

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
source

16

Ajoutez min-height: 100%et ne spécifiez pas de hauteur (ou mettez-la sur auto). Cela a totalement fait le travail pour moi:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

— Remus Simion
source

16

100vw === 100% de la largeur de la fenêtre.

100vh === 100% de la hauteur de la fenêtre.

Si vous souhaitez définir la divlargeur ou la hauteur à 100% de la taille de la fenêtre du navigateur, vous devez utiliser:

Pour largeur: 100vw

Pour la hauteur: 100vh

Ou si vous souhaitez lui attribuer une taille plus petite, utilisez la calcfonction CSS . Exemple:

#example {
    width: calc(100vw - 32px)
}

— Руслан
source

12

Il existe plusieurs méthodes pour régler la hauteur de a <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>

Développer l'extrait

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>

Développer l'extrait

Méthode (c) utilisant une boîte flexible:

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>

Développer l'extrait

— Santosh Khalse
source

12

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 .

— essai
source

12

Le moyen le plus simple est de le faire comme ça.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

Développer l'extrait

— EMILO
source

11

Essayez de mettre height:100%en html&body

html, 
body {
    height: 100%;
}

Et si vous souhaitez 2 diviser la même hauteur, utilisez ou définissez la display:flexpropriété de l' élément parent .

— Mohammed Javed
source

9

Même avec toutes les réponses ici, j'ai été surpris de constater qu'aucune n'a vraiment résolu le problème. Si j'ai utilisé 100vh height/ min-height, la mise en page s'est cassée lorsque le contenu était plus long qu'une page. Si j'utilisais plutôt 100% height/ min-height, la mise en page se cassait lorsque le contenu était inférieur à la hauteur de la page.

La solution que j'ai trouvée, qui a résolu les deux cas, était de combiner les deux premières réponses:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— machineghost
source

1

J'ai une barre de navigation à hauteur fixe de 90 pixels, donc je viens de changer votre "100vh" en "calc (100vh - 90px)"

— Mark Jackson

8

Utilisez simplement l'unité "vh" au lieu de "px", ce qui signifie la hauteur du port de vue.

height: 100vh;

— khalifeh
source

7

Les éléments de bloc consomment la pleine largeur de leur parent, par défaut.

C'est ainsi qu'ils répondent à leur exigence de conception, qui est d'empiler verticalement.

9.4.1 Contextes de formatage de bloc

Dans un contexte de mise en forme de bloc, les boîtes sont disposées les unes après les autres, verticalement, en commençant en haut d'un bloc conteneur.

Ce comportement, cependant, ne s'étend pas à la hauteur.

Par défaut, la plupart des éléments sont à la hauteur de leur contenu ( height: auto).

Contrairement à la largeur, vous devez spécifier une hauteur si vous voulez plus d'espace.

Par conséquent, gardez ces deux choses à l'esprit:

à moins que vous ne vouliez la pleine largeur, vous devez définir la largeur d'un élément de bloc
sauf si vous voulez une hauteur de 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>

Développer l'extrait

— Michael Benjamin
source

7

Voici quelque chose qui ne ressemble pas exactement à ce que vous aviez dans les réponses précédentes, mais cela pourrait être utile pour 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;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-it
source

6

Utiliser FlexBox CSS

Flexbox est parfaitement adapté à ce type de problème. Bien que principalement connue pour la disposition du contenu dans le sens horizontal, Flexbox fonctionne 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 occuperont automatiquement tout l'espace disponible dans leur conteneur.

— robross0606
source

6

L'une des options utilise la table CSS. Il prend en charge un excellent navigateur et fonctionne même dans Internet Explorer 8.

Exemple JSFiddle

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>

Développer l'extrait

— Autocollants
source

6

Essayez ceci - testé:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Edit: mise à jour 2020:

Vous pouvez utiliser vhmaintenant:

#right, #left {
  height: 100vh
}

— lukaszkups
source

5

Vous pouvez utiliser display: flexetheight: 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>

Développer l'extrait

— Thuc Nguyen
source

Il existe déjà plusieurs solutions flexbox publiées, dont une avec cette implémentation exacte publiée seulement 26 jours avant cette réponse.

— TylerH

5

Vous devez faire deux choses, l'une consiste à définir 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;
}

La source

— Prabhakar Undurthi
source

3

Solution obsolète. Utilisez vhplutôt.

— avalanche1

1

Ne l'utilisez pas vhsi vous prévoyez d'utiliser un design réactif sur les appareils mobiles.

— Alexander Kim

5

Essayez le CSS suivant:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— ProblemChild
source

5

En fait, ce qui a fonctionné le mieux pour moi, c'est d'utiliser la vhpropriété.

Dans mon application React, je voulais que le div corresponde à la page haute même lorsqu'il était redimensionné. J'ai essayé height: 100%;, overflow-y: auto;mais aucun d'entre eux n'a fonctionné lors du réglage, height:(your percent)vh;il a fonctionné comme prévu.

Remarque: si vous utilisez un rembourrage, des coins arrondis, etc., assurez-vous de soustraire ces valeurs du vhpourcentage de votre propriété ou 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);
}

— JimmyFlash
source

Soit dit en passant, vous mentionnez des `` coins arrondis '' affectant la hauteur de votre élément, je pense que le réglage box-sizing: border-box;permettrait de surmonter cela, cela signifie que la taille de la bordure est également prise en compte lors du calcul de la taille (largeur et hauteur) de l'élément.

— Neek

5

Essayez ceci une fois ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

Développer l'extrait

— Sunil Rajput
source

3

Si vous utilisez position: absolute;et jQuery, vous pouvez utiliser

$("#mydiv").css("height", $(document).height() + "px");

— John Smith facultatif
source

1

Il n'y a pas besoin de JavaScript. La solution moderne consiste à utiliser le modèle CSS flex box .

— Dan Dascalescu

Si vous utilisez JS, j'ai trouvé cela très utile. REMARQUE: il est préférable de l'utiliser avec $ (window) .load (), car vous obtiendrez des résultats différents en utilisant F5 ou CTRL + F5. Consultez ce lien pour plus d'informations. stackoverflow.com/questions/13314058/…

— edward

2

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>

— RamNiwas Sharma
source

1

Faute d'orthographe possible: widht(vers la fin)

— Peter Mortensen

Comment faire une div à 100% de la hauteur de la fenêtre du navigateur

Longueurs de pourcentage de la fenêtre (ou relatives à la fenêtre )

Quelles sont les longueurs de pourcentage de fenêtre?

Comment cela peut-il être utilisé pour qu'un diviseur remplisse la hauteur du navigateur?

HTML

CSS

Quels navigateurs prennent en charge ces nouvelles unités?

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

En quoi est-ce 100vhdifférent de 100%?

HTML

CSS

En quoi est-ce `100vh`différent de `100%`?