Unità CSS - Qual è la differenza tra vh / vw e%?

138

Ho appena saputo di una nuova e insolita unità CSS. vhe vwmisurare rispettivamente la percentuale di altezza e larghezza della finestra.

Ho esaminato questa domanda da Stack Overflow, ma ha reso le unità ancora più simili.

Come funziona l'unità vw e vh

La risposta dice specificamente

vw e vh sono rispettivamente una percentuale della larghezza e dell'altezza della finestra: 100vw è il 100% della larghezza, 80vw è l'80%, ecc.

Sembra esattamente lo stesso %dell'unità, che è più comune.

In Strumenti per gli sviluppatori, ho provato a cambiare i valori da vw / vh a% e viceversa e ho ottenuto lo stesso risultato.

C'è una differenza tra i due? In caso contrario, perché sono state introdotte queste nuove unità CSS3?

css viewport-units

— Richard Hamilton
fonte

7

Quello che fa vw / vh è rimuovere la dipendenza da qualsiasi genitore e consente il dimensionamento in base alla dimensione della finestra.

— Adesivi

2

Amico lettore, la risposta di IanC potrebbe salvare la tua giornata, assicurati di controllarla.

— Skippy le Grand Gourou,

167

100%può essere 100%all'altezza di qualsiasi cosa. Ad esempio, se ho un genitore divche è 1000pxalto e un bambino divche è in 100%altezza, allora quel bambino divpotrebbe teoricamente essere molto più alto dell'altezza del viewport o molto più piccolo dell'altezza del viewport, anche se divè impostato su 100%altezza .

Se invece divimposto quel bambino impostato su 100vh, riempirà solo 100%l'altezza del viewport e non necessariamente il genitore div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Espandi frammento

— Josh Beam
fonte

Avevo una barra laterale che era nidificata all'interno di una "riga" di bootstrap e non ero in grado di renderla a tutta pagina anche dopo aver impostato l'altezza: 100%. Quello che ha funzionato per me è stato 100vh

— raghav710

28

So che la domanda è molto vecchia e @Josh Beam ha affrontato la differenza più grande, ma ce n'è ancora un'altra:

Supponiamo di avere un <div>figlio diretto di <body>cui desideri riempire l'intero riquadro di visualizzazione, quindi utilizzalo width: 100vw; height: 100vh;. Funziona allo stesso modo width: 100%; height: 100vh;fino a quando non aggiungi più contenuto e viene visualizzata una barra di scorrimento verticale. Poiché l' vwaccount per la barra di scorrimento come parte della finestra, width: 100vw;sarà leggermente più grande di width: 100%;. Questa piccola differenza finisce con l'aggiunta di una barra di scorrimento orizzontale (richiesta all'utente per vedere quella piccola larghezza extra) e, di conseguenza, l'altezza sarebbe anche leggermente diversa in entrambi i casi.

Questo deve essere preso in considerazione quando si decide quale utilizzare, anche se la dimensione dell'elemento genitore è uguale alla dimensione della vista del documento.

Esempio:

Utilizzando width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Espandi frammento

Utilizzando width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Espandi frammento

— IanC
fonte

2

Il CSS body { overflow: hidden }farà sì che le barre di scorrimento non vengano visualizzate.

— Dave F,

2

Grazie per la risposta e l'esempio di codice, @IanC. Mi ha aiutato molto. Un chiarimento: credo che volessi dire "barra di scorrimento" quando hai scritto "barra laterale".

Ecco alcune discussioni correlate sulle unità viewport che contano le barre di scorrimento che ho trovato utili:

Le specifiche W3C per le unità vw, vh, vmin, vmax (le "lunghezze percentuali della finestra") indicano che "si presume che non esistano barre di scorrimento".

Apparentemente Firefox sottrae la larghezza della barra di scorrimento da 100 Vw, come il commento di @ Nolonar a Differenza tra Larghezza: 100% e larghezza: 100 Vw? osserva, citando "Posso usare".

Posso usare , forse in tensione con le specifiche (?), Dice che tutti i browser diversi da Firefox attualmente "erroneamente" considerano 100vw l'intera larghezza della pagina inclusa la barra di scorrimento verticale.

— Undertow lento
fonte

1

le unità vw (view-width) e vh (view-height) sono relazionali alla dimensione della porta della vista, dove 100vw o vh è il 100% della larghezza / altezza della porta della vista.

Ad esempio, se una porta di visualizzazione ha una larghezza di 1600 px e si specifica qualcosa come 2vw, sarà equivalente al 2% della larghezza della porta di visualizzazione o a 32 px.

L'unità% si basa sempre sulla larghezza dell'elemento padre dell'elemento corrente

0

C'è una differenza che non è stata necessariamente sollevata. 100vw include la larghezza della barra di scorrimento, mentre il 100% non la include. È una piccola differenza, ma importante quando si fa design.

1

La risposta di IanC fa. "Poiché l'account vw per la barra di scorrimento come parte della finestra, larghezza: 100vw; sarà leggermente più grande della larghezza: 100% ;."

— j08691