1
resposta

Definir altura com vh

Em casos como o do exercício, em que queremos que o elemento ocupe toda a altura da tela, existe alguma diferença entre definir a altura usando "height:100 vh" ou "height: 100%"?

Eu tendo a fazer da primeira forma por ser mais rápido e para evitar ter que definir a altura de todos os pais do elemento, mas fiquei na duvida se haveria algum ponto negativo em fazer assim, tanto em termos de comportamento do elemento quanto de compatibilidade nos browsers.

1 resposta

Rafael, boa tarde!

Ao usar o % para definir o tamanho de um elemento, ele será referente ao tamanho do elemento pai, como no exemplo abaixo

<div class="pai>
    <div class="filho">

    </div>
</div>

Usando o estilo

.pai {
 height: 250px;
}
.filho {
 height: 50%; //Isso equivale a 125px
}

Já ao usar a medida vh estamos nos referindo ao tamanho da tela do dispositivo.

Para ficar mais claro temos um post no blog com uma explicação sobre boa parte das medidas do CSS

https://blog.alura.com.br/guia-de-unidades-no-css/

Espero ter ajudado e bons estudos!