height: calc(100vh - 50px);
Por favor alguém poderia me explicar esse cálculo? Eu não entendi.
height: calc(100vh - 50px);
Por favor alguém poderia me explicar esse cálculo? Eu não entendi.
Olá, Bruno!
Esse cálculo utiliza-se da medida relativa da altura da viewport
. O que ele diz, basicamente é: pegue a altura da tela do navegador e remova 50px.
Assim nós não precisamos nos preocupar com o valor da altura da tela do usuário, que é variável, já que temos telas de notebooks de vários tamanhos, como também monitores de tamanhos diferentes, além dos celulares. Então, no momento em que o site estiver aberto, o próprio CSS irá descobrir isso para nós. E depois remover 50px desse valor, como solicitado.
Isso é feito porque sabemos que o cabeçalho possui 50px, e queremos toda a altura da tela, menos o espaço que o cabeçalho precisa. Se não removermos esses 50px, o conteúdo irá ocupar o valor equivalente a altura da tela, e como o cabeçalho está acima dele, o conteúdo acabará ficando 50px além da tela.
Espero ter ajudado!
Entendi, muito obrigado Leonardo.