Unidades CSS - Qual é a diferença entre vh / vw e%?

138

Acabei de aprender sobre uma unidade CSS nova e incomum. vhe vwmeça a porcentagem de altura e largura da janela de visualização, respectivamente.

Eu olhei para essa pergunta do Stack Overflow, mas fez as unidades parecerem ainda mais semelhantes.

Como funciona a unidade vw e vh

A resposta diz especificamente

vw e vh são uma porcentagem da largura e altura da janela, respectivamente: 100vw é 100% da largura, 80vw é 80% etc.

Parece exatamente o mesmo que a %unidade, que é mais comum.

Nas Ferramentas do desenvolvedor, tentei alterar os valores de vw / vh para% e vice-versa e obtive o mesmo resultado.

Existe alguma diferença entre os dois? Caso contrário, por que essas novas unidades foram introduzidas CSS3?

css viewport-units

— Richard Hamilton
fonte

7

O que vw / vh faz é remover a dependência de qualquer pai e permitir o dimensionamento com base no tamanho da janela de exibição.

— Adesivos

2

Amigo leitor, a resposta do IanC pode muito bem salvar o seu dia, não deixe de conferir.

— Skippy le Grand Gourou

167

100%pode ser 100%da altura de qualquer coisa. Por exemplo, se eu tiver um pai divque seja 1000pxalto e um filho divque esteja em 100%altura, divteoricamente , esse filho poderá ser muito mais alto que a altura da janela de visualização ou muito menor que a altura da janela de visualização, mesmo que divesteja definido como 100%altura .

Se, em vez disso, divdefinir esse filho 100vh, ele só100% será preenchido com a altura da janela de visualização , e não necessariamente o pai 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>

Expandir snippet

— Josh Beam
fonte

Eu tinha uma barra lateral aninhada dentro de uma "linha" de inicialização e não consegui torná-la em tamanho de página inteira, mesmo depois de definir a altura: 100%. O que funcionou para mim foi 100vh

— raghav710

27

Eu sei que a pergunta é muito antiga e @ Josh Beam abordou a maior diferença, mas ainda há outra:

Suponha que você tenha um <div>filho direto do <body>qual deseja preencher toda a janela de exibição, para usá-lo width: 100vw; height: 100vh;. Tudo funciona da mesma maneira que width: 100%; height: 100vh;até você adicionar mais conteúdo e uma barra de rolagem vertical aparecer. Como a vwconta da barra de rolagem como parte da janela de visualização width: 100vw;será um pouco maior que width: 100%;. Essa pequena diferença acaba adicionando uma barra de rolagem horizontal (necessária para o usuário ver essa pequena largura extra) e, consequentemente, a altura também seria um pouco diferente nos dois casos.

Isso deve ser levado em consideração ao decidir qual deles usar, mesmo se o tamanho do elemento pai for o mesmo que o tamanho da janela de visualização do documento.

Exemplo:

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

Expandir snippet

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

Expandir snippet

— IanC
fonte

2

O CSS body { overflow: hidden }fará com que as barras de rolagem não sejam exibidas.

— Dave F

2

Obrigado por sua resposta e exemplo de código, @IanC. Isto me ajudou bastante. Um esclarecimento: acredito que você quis dizer "barra de rolagem" quando escreveu "barra lateral".

Aqui estão algumas discussões relacionadas sobre unidades de janela de visualização que contam barras de rolagem que também achei úteis:

A especificação do W3C para as unidades vw, vh, vmin, vmax (os "comprimentos percentuais da janela de exibição") diz que "qualquer barra de rolagem é assumida como inexistente".

Aparentemente, o Firefox subtrai a largura da barra de rolagem de 100vw, como o comentário de @ Nolonar em Diferença entre Largura: 100% e largura: 100vw? observa, citando "Posso usar".

Can I Use , talvez em tensão com a especificação (?), Diz que todos os navegadores que não o Firefox atualmente "incorretamente" consideram 100vw a largura da página inteira, incluindo a barra de rolagem vertical.

— Slack Undertow
fonte

1

as unidades vw (largura da vista) e vh (altura da vista) são relacionais ao tamanho da porta de visualização, em que 100vw ou vh é 100% da largura / altura da porta de visualização.

Por exemplo, se uma porta de visualização tiver 1600 px de largura e você especificar algo como 2vw, isso será equivalente a 2% da largura da porta de visualização, ou 32px.

A unidade% é sempre baseada na largura do elemento pai do elemento atual

0

Há uma diferença que não foi necessariamente levantada. 100vw inclui a largura da barra de arraste, enquanto 100% não a inclui. É uma pequena diferença, mas importante ao fazer o design.

1

A resposta de IanC faz. "Como a conta vw da barra de rolagem como parte da janela de visualização, width: 100vw; será um pouco maior que a largura: 100%;" "

— j08691 17/07/19