2140

Ho un layout con due colonne: una sinistra dive una destra div.

Il diritto divha un grigio background-colore ne ho bisogno per espandersi verticalmente a seconda dell'altezza della finestra del browser dell'utente. In questo momento background-colortermina l'ultimo contenuto di questo div.

Ho provato height:100%, min-height:100%;e così via

html css height

— Mike
fonte

7

Possiate troverete questa domanda utile stackoverflow.com/questions/1366548/...

— Ivan Nevostruev

Buona strada da percorrere, ma le unità vh, vw ecc sono note per essere buggy. C'è questa alternativa js leggera se ne hai bisogno: joaocunha.github.io/vunit

— vedi più nitido

Ecco una spiegazione semplice e chiara della heightproprietà CSS con valori percentuali: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

puoi usare altezza: 100vh; proprietà css

— Vishnu Chauhan

2833

Esistono un paio di unità di misura CSS 3 chiamate:

Lunghezze di Viewport-Percentage (o Viewport-Relative)

Quali sono le lunghezze in percentuale del viewport?

Dalla raccomandazione del candidato W3 collegata sopra:

Le lunghezze in percentuale della finestra sono relative alla dimensione del blocco contenente iniziale. Quando l'altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionate di conseguenza.

Queste unità sono vh(altezza della finestra), vw(larghezza della finestra), vmin(lunghezza minima della finestra) e vmax(lunghezza massima della finestra).

Come può essere usato per fare in modo che un divisore riempia l'altezza del browser?

Per questa domanda, possiamo usare vh: 1vhè uguale all'1% dell'altezza del viewport. Vale a dire100vh è uguale all'altezza della finestra del browser, indipendentemente da dove si trova l'elemento nell'albero DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Questo è letteralmente tutto ciò che serve. Ecco un esempio di JSFiddle di questo in uso.

Quali browser supportano queste nuove unità?

Questo è attualmente supportato su tutti i principali browser aggiornati ad eccezione di Opera Mini. Scopri Posso usare ... per ulteriore supporto.

Come può essere usato con più colonne?

Nel caso della domanda in esame, con un divisore sinistro e uno destro, ecco un esempio di JSFiddle che mostra un layout a due colonne che coinvolge entrambi vhe vw.

Come è `100vh`diverso`100%` ?

Prendi questo layout per esempio:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

Il ptag qui è impostato su un'altezza del 100%, ma poiché il suo contenuto divha un'altezza di 200 pixel, il 100% di 200 pixel diventa 200 pixel, non il 100% bodydell'altezza. Usare 100vhinvece significa che il ptag avrà un'altezza del 100% bodyindipendentemente divdall'altezza. Dai un'occhiata a questo JSFiddle di accompagnamento per vedere facilmente la differenza!

— James Donnelly
fonte

35

Strano comportamento con lo scorrimento quando l'elemento è in realtà più alto della finestra. Il contenitore mantiene l'altezza della finestra e il contenuto scorre fuori dal contenitore. min-height:100vhsembra aggirare questo.

— wdm,

8

@DGDD funziona su iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 e IEMobile 10.0. Non so a quale browser mobile fai riferimento, ma quei 4 rappresentano oltre il 90% dei browser mobili utilizzati. Questa domanda non specifica un requisito per lavorare sui browser mobili.

— James Donnelly,

1

@ robross0606 di nuovo che non è la domanda a cui ho risposto qui. Questa è una domanda completamente diversa, la cui risposta fa infatti uso FlexBox: stackoverflow.com/questions/90178/...

— James Donnelly

1

@JamesDonnelly Sì, lo so. Ma questa non è la risposta a questa domanda. L'altezza della finestra del browser include l'altezza della barra di navigazione. Questo sarebbe meglio, perché sui browser mobili, l'altezza della finestra cambia ogni volta che la barra di navigazione mostra / nasconde.

— RedClover

3

Avviso mobile: utilizzo di vh mess con Chrome mobile che non tiene conto della sua barra di navigazione. Quindi copre la parte superiore della pagina con esso. Un problema serio se hai un menu lì ...

— Offirmo,

568

Se si desidera impostare l'altezza di uno <div>o più elementi, è necessario impostare anche l'altezza di <body>e <html>al 100%. Quindi puoi impostare l'altezza dell'elemento con il 100% :)

Ecco un esempio:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— Ariona Rian
fonte

109

Correggimi se sbaglio, ma penso che anche tu abbia bisogno di impostare l'altezza per tutti i genitori del div, per lavorare davvero

— Dany Y

Questo non funzionerà se sto usando il design continuo: altezza della pagina 6000px, con blocchi che rappresentano le pagine. Voglio che un blocco sia esattamente all'altezza del viewport.

— Qwerty,

@DanyY, hai ragione. Devi impostare l'altezza per tutti i genitori del div, con le implicazioni di tutto ciò che ha l'altezza dello schermo. Ecco un esempio .

— toto_tico,

Questo trucco funziona per alcuni casi, ma non per alcuni casi. Se cerchi la compatibilità o il modo più consigliato, puoi visualizzare la risposta di @ James sopra :) Utilizzando il metodo percentuale Viewport :), dovrebbe funzionare anche questo. salute

— Ariona Rian,

8

@Qwerty, ecco la soluzione. Imposta css come così: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Quindi, se hai 3 sezioni, saràhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb il

283

Se riesci a posizionare assolutamente i tuoi elementi,

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

lo farebbe.

— Tinister
fonte

16

Funziona estraendo l'elemento dal flusso del documento e cementando il suo valore inferiore all'altezza del suo genitore. Questo non è l'ideale quando il contenuto supera l'altezza del suo genitore.

— Ricky Boyce,

1

Non funziona quando uno dei suoi genitori è impostato su position:relativee la sua altezza non è al 100% del viewport. Si adatterà in alto e in basso al prossimo antenato relativo o assoluto.

— Seika85

141

È possibile utilizzare l'unità view-port in 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
fonte

1

@Lamar Dovresti usare * { box-sizing: border-box; }per evitare che ciò accada.

— Luca Steeb,

2

Vale la pena controllare caniuse per il supporto del browser sulle unità viewport: caniuse.com/#feat=viewport-units

— Dave Everitt

133

È possibile utilizzare vhin questo caso che è relativo all'1% dell'altezza della finestra ...

Ciò significa che se vuoi coprire l'altezza, basta semplicemente usare 100vh.

Guarda l'immagine qui sotto che disegno per te qui:

Prova lo snippet che ho creato per te come di seguito:

.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>

Espandi frammento

— Alireza
fonte

Dare 100vh ha aggiunto uno scorrimento verticale per la pagina, quindi ha seguito questo, ma non ha funzionato. stackoverflow.com/questions/44645465/… . C'è un modo per evitare lo scorrimento verticale e fare in modo che il div tocchi il fondo senza alcun contenuto?

— DILEEP THOMAS,

@DILEEPTHOMAS cerca esistentipaddings/margins

— Legends

@Legends nel file root che ho provato a dare come * {margin: 0, padding: 0} ma non ha funzionato

— DILEEP THOMAS

1

@DILEEPTHOMAS dai un'occhiata a questo esempio qui fornito da Alireza, ha anche una barra di scorrimento perché l'elemento body ha un margine. Se si rimuove il margine, la barra di scorrimento scompare. Può avere cause diverse, ma questa prima vorrei fare il checkout.

— Legends

102

Tutte le altre soluzioni, compresa quella più votata con, non vhsono ottimali rispetto al modello flessibile soluzione del .

Con l'avvento del modello flessibile CSS , risolvere il problema del 100% dell'altezza diventa molto, molto semplice: usare height: 100%; display: flexsul genitore eflex: 1 sugli elementi figlio. Occuperanno automaticamente tutto lo spazio disponibile nel loro contenitore.

Nota quanto sono semplici il markup e il CSS. Nessun hack da tavolo o altro.

Il modello flessibile è supportato da tutti i principali browser e da 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>

Espandi frammento

Ulteriori informazioni sul modello flessibile qui.

— Airen
fonte

3

un avvertimento: quando il contenuto di uno dei contenitori sinistro / destro supera l'altezza del corpo originale, il contenitore opposto non verrà ridimensionato, quindi i contenitori finiranno con altezze diverse.

— schellmax,

1

Esempio del problema che Schellmax sottolinea: jsfiddle.net/Arete/b4g0o3pq

— Arete,

A seconda del design, overflow-y: auto;può evitare "i contenitori superano l'altezza del corpo originale".

— Evi Song,

54

Non menzionate alcuni dettagli importanti come:

La larghezza del layout è fissa?
Una o entrambe le colonne hanno una larghezza fissa?

Ecco una 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>

Espandi frammento

Ci sono molte variazioni su questo a seconda di quali colonne devono essere riparate e quali sono liquide. Puoi farlo anche con un posizionamento assoluto, ma in genere ho trovato risultati migliori (in particolare in termini di browser incrociati) utilizzando invece i float.

— Cletus
fonte

34

Questo è ciò che ha funzionato per me:

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

Espandi frammento

Utilizzare position:fixedinvece di position:absolute, in questo modo anche se si scorre verso il basso la divisione si espanderà fino alla fine dello schermo.

— Majda
fonte

Questo codice con "position: [fixed | absolute]" è ottimo per gli sfondi dei popup (come quando si fa clic per ingrandire un'immagine) ma non è così sicuro nei casi in cui è necessario scorrere verso il basso. Pasta ancora utile!

— Mannyfatboy,

29

Ecco una correzione per l'altezza.

Nel tuo CSS usa:

#your-object: height: 100vh;

Per browser che non supportano vh-units, utilizzare modernizr.

Aggiungi questo script (per aggiungere il rilevamento per 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;
});

Infine utilizza questa funzione per aggiungere l'altezza del viewport #your-objectse il browser non supporta vh-units:

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

— Jonas Sandstedt
fonte

24

100% funziona diversamente per larghezza e altezza.

Quando si specifica width: 100%, significa "occupare il 100% della larghezza disponibile dall'elemento padre o larghezza della finestra".

Quando si specifica height: 100%, significa solo "occupare il 100% dell'altezza disponibile dall'elemento padre". Questo significa che se non specifichi un'altezza in corrispondenza di un elemento di livello superiore, l'altezza di tutti i figli sarà una 0o l'altezza del genitore, ed è per questo che devi impostare l'elemento più in alto per avere min-heightun'altezza della finestra.

Indico sempre che il corpo deve avere un'altezza minima di 100 Vh e che semplifica il posizionamento e i calcoli,

body {
  min-height: 100vh;
}

— Dinesh Pandiyan
fonte

16

Aggiungi min-height: 100%e non specificare un'altezza (o impostala su auto). Ha fatto totalmente il lavoro per me:

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

— Remus Simion
fonte

16

100vw === 100% della larghezza della finestra.

100vh === 100% dell'altezza della finestra.

Se si desidera impostare la divlarghezza o l'altezza al 100% delle dimensioni della finestra del browser, è necessario utilizzare:

Per larghezza: 100vw

Per altezza: 100vh

Oppure, se si desidera impostare dimensioni inferiori, utilizzare la calcfunzione CSS . Esempio:

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

— Руслан
fonte

12

Sono disponibili diversi metodi per impostare l'altezza da a <div>al 100%.

Metodo (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>

Espandi frammento

Metodo (B) utilizzando 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>

Espandi frammento

Metodo (c) utilizzando la scatola flessibile:

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>

Espandi frammento

— Santosh Khalse
fonte

12

Questo ha funzionato per me:

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

Tratto da questa pagina .

— analisi
fonte

12

Il modo più semplice è farlo in questo modo.

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

<div></div>

Espandi frammento

— Emilo
fonte

11

Prova a impostare height:100%in html&body

html, 
body {
    height: 100%;
}

E se vuoi 2 div altezza uguale o impostare la display:flexproprietà dell'elemento genitore .

— Mohammed Javed
fonte

9

Anche con tutte le risposte qui, sono stato sorpreso di scoprire che nessuno ha davvero risolto il problema. Se avessi usato 100vh height/ min-height, il layout si sarebbe rotto quando il contenuto fosse più lungo di una pagina. Se invece avessi usato 100% height/min-height , il layout si sarebbe rotto quando il contenuto era inferiore all'altezza della pagina.

La soluzione che ho trovato, che ha risolto entrambi i casi, è stata quella di combinare le prime due risposte:

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

— machineghost
fonte

1

Ho una barra di navigazione fissa di 90 px, quindi ho dovuto cambiare il tuo "100vh" in "calc (100vh - 90px)"

— Mark Jackson il

8

Basta usare l'unità "vh" invece di "px", che significa altezza vista-porta.

height: 100vh;

— Khalifeh
fonte

7

Gli elementi di blocco consumano l'intera larghezza del loro genitore, per impostazione predefinita.

È così che soddisfano i loro requisiti di progettazione, che è quello di impilare verticalmente.

9.4.1 Contesti di formattazione dei blocchi

In un contesto di formattazione dei blocchi, le caselle sono disposte una dopo l'altra, verticalmente, a partire dalla parte superiore di un blocco contenitore.

Questo comportamento, tuttavia, non si estende all'altezza.

Per impostazione predefinita, la maggior parte degli elementi è l'altezza del loro contenuto (height: auto ).

A differenza della larghezza, è necessario specificare un'altezza se si desidera spazio aggiuntivo.

Pertanto, tieni a mente queste due cose:

a meno che non si desideri la larghezza completa, è necessario definire la larghezza di un elemento di blocco
a meno che non si desideri l'altezza del contenuto, è necessario definire l'altezza di un elemento

.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>

Espandi frammento

— Michael Benjamin
fonte

7

Ecco qualcosa che non è esattamente come quello che hai avuto nelle risposte precedenti, ma potrebbe essere utile per alcuni:

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
fonte

6

Usa CSS FlexBox

Flexbox si adatta perfettamente a questo tipo di problema. Benché noto soprattutto per la disposizione dei contenuti in direzione orizzontale, Flexbox funziona anche per problemi di layout verticale. Tutto quello che devi fare è avvolgere le sezioni verticali in un contenitore flessibile e scegliere quali vuoi espandere. Occuperanno automaticamente tutto lo spazio disponibile nel loro contenitore.

— robross0606
fonte

6

Una delle opzioni sta usando la tabella CSS. Ha un ottimo supporto per il browser e funziona anche in Internet Explorer 8.

Esempio 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>

Espandi frammento

— Adesivi
fonte

6

Prova questo - testato:

body {
  min-height: 100%;
}

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

Modifica: aggiornamento 2020:

Puoi usare vhora:

#right, #left {
  height: 100vh
}

— lukaszkups
fonte

5

Puoi usare display: flexeheight: 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>

Espandi frammento

— Thuc Nguyen
fonte

Sono già state pubblicate diverse soluzioni flexbox, di cui una con questa esatta implementazione pubblicata solo 26 giorni prima di questa risposta.

— TylerH,

5

Devi fare due cose, una è impostare l'altezza al 100% che hai già fatto. Il secondo è impostato su assoluto. Questo dovrebbe fare il trucco.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

fonte

— Prabhakar Undurthi
fonte

3

Soluzione obsoleta Usa vhinvece.

— valanga1

1

Non utilizzare vhse si prevede di utilizzare il design reattivo su dispositivi mobili.

— Alexander Kim,

5

Prova il seguente CSS:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— ProblemChild
fonte

5

In realtà ciò che ha funzionato meglio per me è stato usare la vhproprietà.

Nella mia applicazione React volevo che il div corrispondesse alla pagina in alto anche quando ridimensionato. Ho provato height: 100%;, overflow-y: auto;ma nessuno di loro ha funzionato quando lo ha impostato height:(your percent)vh;funzionava come previsto.

Nota: se si utilizza un'imbottitura, angoli arrotondati, ecc., Assicurarsi di sottrarre quei valori dalla vhpercentuale della proprietà o aggiungere ulteriore altezza e far apparire le barre di scorrimento. Ecco il mio esempio:

.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
fonte

A proposito, menzioni "angoli arrotondati" che influenzano l'altezza del tuo elemento, mi aspetto che l'impostazione box-sizing: border-box;superi questo, significa che anche la dimensione del bordo viene presa in considerazione nel calcolo della dimensione (larghezza e altezza) dell'elemento.

— Neek,

5

Prova una volta ...

*{
  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>

Espandi frammento

— Sunil Rajput
fonte

3

Se usi position: absolute;e jQuery, puoi usare

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

— John Smith Opzionale
fonte

1

Non è necessario JavaScript. La soluzione moderna è utilizzare il modello di box flessibile CSS .

— Dan Dascalescu,

Se stai usando JS, ho scoperto che questo è abbastanza utile. NOTA: è consigliabile utilizzarlo con $ (window) .load (), poiché si otterranno risultati diversi restituiti utilizzando F5 o CTRL + F5. Controlla questo link per maggiori informazioni. 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
fonte

1

Possibile errore di ortografia: widht(verso la fine)

— Peter Mortensen,

Come fare un div altezza al 100% della finestra del browser

Lunghezze di Viewport-Percentage (o Viewport-Relative)

Quali sono le lunghezze in percentuale del viewport?

Come può essere usato per fare in modo che un divisore riempia l'altezza del browser?

HTML

CSS

Quali browser supportano queste nuove unità?

Come può essere usato con più colonne?

Come è 100vhdiverso100% ?

HTML

CSS

Come è `100vh`diverso`100%` ?