Olá!
Na aula 03 do módulo 02, somos apresentados aos conceitos de viewport height (basicamente, a altura da janela de visualização) e também a função calc () do CSS. Com isso, é possível determinar que o banner ocupe 100% da tela visível, descontado o tamanho o tamanho do header.
.banner__image {
height: calc(100vh - 72px);
width: 100%;
}Quando pensamos em linguagens de programação, é muito comum projetar esse tipo de cálculo para que o funcione independente do valor inserido. Imagine que se amanhã trocarmos a altura do header, mantendo a regra atual de CSS, o cálculo já não cumprirá mais o seu papel, uma vez que ainda estaria atrelado aos 72px. Uma sugestão seria acrescentar ao curso um tópico extra, mesmo que em texto, explicando o uso de variável em CSS e como elas podem ser úteis - dentre outras coisas - para cálculos como este.
Uma possível solução seria:
/* Estrutura para criação de variáveis no CSS, aqui podem ser adicionadas inúmeras variáveis. Adicione no início do seu arquivo CSS */
:root {
--altura-cabecalho: 72px;
}
/* Especificando a altura do cabeçalho */
.cabecalho {
/* Adicione esta linha junto as demais vistas no curso, nela estamos dizendo que a altura (height) é igual a definida na variável --altura-cabecalho*/
height: var(--altura-cabecalho);
}
/* Por fim, altere também no cálculo banner */
.banner__image {
height: calc(100vh - var(--altura-cabecalho));
}Apesar de termos adicionado algumas linhas extras de código, se for preciso alterar a altura do cabeçalho basta modificar o valor da variável --altura-cabecalho e com isto, a nova altura será replicado para todas as regras que a utilizam, incluindo o próprio cálculo. Desta forma, o comportamento esperado será mantido para qualquer valor utilizado, sem que tenhamos que alterar em vários locais do código.
