Eu não entendi como esses valores (100vh) funcionam nessas propriedades.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Eu não entendi como esses valores (100vh) funcionam nessas propriedades.
Oi Davi,
Os valores 100vh no CSS representam 100% da altura da viewport (a área visível da página no navegador). Quando você usa height: 100vh;, o elemento ocupará toda a altura da tela, independentemente do tamanho do conteúdo dentro dele.
Por exemplo, se você quiser que um div preencha toda a tela, você pode usar:
.full-height {
height: 100vh;
background-color: lightblue;
}
Este código fará com que a div com a classe full-height se estenda até a parte inferior da tela. Da mesma forma, width: 100vh; não é uma prática comum, pois vh se refere à altura, e o uso de vw (viewport width) seria mais apropriado para largura.
Lembre-se que vh é útil para layouts responsivos, onde você deseja que os elementos se ajustem à visualização do usuário.
Caso este post o tenha ajudado, por favor,
marcar como solucionado ☑️.
Bons Estudos! 🤓