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

Dúvida em relação ao espaço estabelecido para cabeçalho, conteúdo e rodapé

Agora eu consegui compreender pq mudar os valores de grid-template-rows para "50px auto auto". Mas ai surgiu outra dúvida:

Se estabelecemos que o conteúdo teria 100vh e só mudamos esse valor agora no final, porque tudo o que faz parte do conteúdo (incluindo os populares, destaques e lançamentos) não ficaram limitados aos 100vh? Eu entendi que 100vh faz ocupar toda a janela, e não toda a página, por isso o footer permaneceu onde estava. O que não entendo é pq tudo o que compõe o conteúdo passou dos 100vh que estabelecemos no começo. Este não deveria ser o seu limite?

3 respostas
solução!

Fala ai Veronica, tudo bem? Vamos lá:

O que não entendo é pq tudo o que compõe o conteúdo passou dos 100vh que estabelecemos no começo. Este não deveria ser o seu limite?

Isso porque o 100vh não desconsidera a altura do header, por isso passa o conteúdo da página, pois, tem um header com X de altura + os 100vh.

Imagine que 100vh seja 720px e o header tenha 100px.

Nesse caso a altura do conteudo precisa ser 620px pois já tem um elemento com 100px de altura na pagina.

Espero ter ajudado.

Matheus, também estava com a mesma dúvida!

Deixa eu ver só se entendi bem: seria semelhante ao método do padding e content quando não definimos "overflow: hidden" ? Caso padding + content passe do tamanho declarado antes da sua div, ele 'quebra' a box passando por suas dimensões?

Fala ai Paulo, tudo bem? É isso ai mesmo.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software