Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Position Fixed e padding-bottom no main

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Elementos onde queremos e atividade Elementos onde quisermos

por Alessandra
| 57k xp | 8 posts

Boa noite! Por favor, esclarece uma dúvida? Ao inserir o padding-bottom: 80% no main para que ao usarmos o scroll o conteúdo da página tenha mais espaço e não fique cortado ou muito juntinho do nosso rodapé, não sei o que aconteceu no meu projeto ... ficou um espação, ou seja, eu usei mais o scroll do que comparado ao projeto das aulas. O que será que fiz de errado? Um grande abraço e muito obrigada!

main {
    width: 85%;
    float: left;
    padding-bottom: 80%;

}
.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
4 respostas
por Joel Andrade
| 52.4k xp | 1 posts

Voce deve remover o 

padding-bottom: 80%;

do main.. pois no main não precisa...

solução!
por Vítor Gomes Chagas
| 48.1k xp | 2 posts

O certo é 80pxao invés de 80%:

padding-bottom: 80px;
por Alessandra
| 57k xp | 8 posts

Vitor, bom dia! Obrigada! alterei para px e deu tudo certinho! Preciso ainda saber a diferença de quando usar porcentagem ou pixels, ou ainda, qualquer outra medida. Valeu!

por Vítor Gomes Chagas
| 48.1k xp | 2 posts

Existem dois tipos de unidades de medida: absoluto e relativo. px é um exemplo de unidade absoluta, pois o valor computado é fixo. Já % é um exemplo de unidade relativa, pois o valor correspondente depende de algum fator.

No caso do %, o valor é relativo ao pai do elemento. Por exemplo, se você fizer:

main {
    padding-bottom: 80%;
}

O valor computado de padding-bottom da tag main será 80% do tamanho do pai de main, que provavelmente é o body. Então, se o tamanho do body for 1000px, o valor do padding-bottom será 800px. Por isso ficou um espaço bem grande. Já usando 80px, o valor será fixo em 80 pixels, que é o desejado nesse caso.

Você pode ver todas as unidades de medida aqui: https://www.w3schools.com/cssref/css_units.asp