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

Dificuldade

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?

2 respostas
solução!

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 1

Imagem 2

Imagem 2

OBS:

  • % (porcentagem): unidade relativa / flexível, ou seja, quando houver o redimensionamento do navegador em tela, logo o elemento do DOM que receber essa unidade em uma propriedade width / height, será reajustado tornando-se responsivo (significado: se reajusta em relação ao tamanho disponível em tela)
  • px (pixels): unidade fixa, ou seja, mesmo se o tamanho do navegador em tela for reduzindo (ato de redimensionar o tamanho do navegador), o elemento que contém essa unidade em uma propriedade 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!