Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Esses cálculos.......

height: calc(100vh - 50px);

Por favor alguém poderia me explicar esse cálculo? Eu não entendi.

2 respostas
solução!

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.