Solucionado
Boa tarde!
Alguem que ja fez a resolução poderia me explicar essa função e o motivo de ter chegado nela?
height: calc(100% - 80px);Honestamente eu não entendi o motivo de fazer as contas, e tambem o professor não havia feito e nem sabia que existia esse tipo de função. Alguem mais está com esse tipo de dificuldade, e tambem com o instrutor apenas narrando o codigo?
Boa tarde Luan,
No CSS a função calc tem por objetivo realizar uma determinada operação matemática e assim como no seu exemplo; a propriedade height que se diz respeito a altura de um elemento do DOM (pode ser uma div, p, img, section....ou qualquer outro elemento HTML) está indicando que o valor final atribuído nessa propriedade height será de 100% do tamanho total disponível em tela (o % significa unidade relativa), menos o valor de 80px (o px significa unidade fixa)
Exemplo: Repare na primeira imagem que o 80px é a parte fixa (porção que será subtraída do total de 100% disponível em tela), ou seja, a medida que fosse redimensionado o navegador, logo a proporção de 100%, visualmente iria diminuindo, conforme imagem 2 abaixo.
Imagem 1
Imagem 2
OBS:
width / height, será reajustado tornando-se responsivo (significado: se reajusta em relação ao tamanho disponível em tela)width / height, terá o comportamento de se manter fixadamente, ou seja, não será responsivo e não se reajustará de acordo com o espaço disponível, mas ficará fixo e ultrapassando / atravessando uma largura ou altura mesmo que não haja espaço disponível na área visível no navegador.Mais utilizações com a função calc: https://developer.mozilla.org/pt-BR/docs/Web/CSS/calc
Atenciosamente Felipe D.R
Entendi como funciona, muito obrigado!