Como chegou ao valor de 72 em -> height: calc(100vh - 72px); na class banner__imagem, no arquivo banner__imagem.css.
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.