Como chegou ao valor de 72 em -> height: calc(100vh - 72px); na class banner__imagem, no arquivo banner__imagem.css.
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!
Como chegou ao valor de 72 em -> height: calc(100vh - 72px); na class banner__imagem, no arquivo banner__imagem.css.
Oi Josimar!
Não dá pra saber quanto seria o resultado de height: calc(100vh - 72px) assim de cara, pois a medida de 100vh significa 100% da view-height. Esse cálculo mudaria de acordo com alguns pontos como resolução da view do usuário, qual navegador utiliza, se utiliza barra de favoritos ou não.
Em height: calc(100vh - 72px), diz que o height do elemento deve ter 100% da altura da área útil do browser e subtrair 72px.
Testando essa propriedade na minha resolução que é de 1366x768, obtenho dois resultados diferentes:
Então para eu entender melhor, como você pegou esse valor de 72em?
Oi Josimar, tudo bem?
Estou na mesma aula que você. Os 72px é porque é o height do cabeçalho que foi definido na aula anterior. Se colocassemos o height da imagem como 100vh, ele ia entender que a imagem precisa ter altura igual da sua tela, sem considerar o cabeçalho.
Se seu cabeçalho fosse definido com um height de 500px e a imagem do banner com 100vh, a imagem teria a altura da sua tela ainda, só que você ia ter que scrollar todo o cabeçalho pra chegar nela, por isso subtraímos a altura dele.