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

Problema ao usar possition fixed no rodapé.

Olá pessoal, terminei hoje o curso de html e css e resolvi refazer a página do João da Silva sem consultar o material. Eu estava indo bem, mas estou com problemas no footer da página ao deixa-lo com possition fixed. Já fiz de tudo e não consegui resolver, o problema é que o rodapé esconde o conteúdo da página, lembro que na aula o instrutor sugere por padding-bottom na tag body, mas não resolveu. Segue o meu bio.html e site.css:

<!DOCTYPE html>

Sobre mim

Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.

Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.

Como trabalho

João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!

José Souza, Fiat

Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.

Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.

Experiência

João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.

Manoel Santos, Petrobrás

Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.

Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável

Comunidade

Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.

Foto do João da Silva

João da Silva

© João da Silva 2015.

CSS:

main{ float: left; width: 85%; } body{ font-family: "Crimson Text", serif; text-align: justify; font-size: 20px; background: #F2FFFC; line-height: 30px; padding-bottom: 100px; }

.container{ margin-right: auto; margin-left: auto; width: 750px; }

strong{ font-weight: bold; }

a{ color: #851944; }

em{ font-style: italic; }

p{ margin: 20px 0; }

main h1{ font-size: 60px; font-family: "Open Sans Condensed", sans-serif; text-transform: uppercase; border-bottom: 10px solid black; background: #851944; text-align: center; padding: 20px; color: floralwhite; margin-bottom: 30px; clear: both; }

h2{ font-size: 30px; font-family: "Open Sans Condensed", sans-serif; padding: 20px; clear: both; }

.rodape-pagina{ background: black; color: floralwhite; padding: 20px; position: fixed; left: 0px; bottom: 0px; display: block; width: 100%; }

.foto-joao{ float: right; border-bottom: 10px solid black; border-left: 10px solid black; box-sizing: border-box; position: absolute; top: 0; right: 0; }

.navegacao{ text-transform: lowercase; color: floralwhite; background: #3C1D3D; float: right; width: 15%; box-sizing: border-box; border: 10px solid black; text-align: center; padding-bottom: 30px; position: relative; top: 300px; }

.navegacao h1{ font-size: 30px; font-family: "Open Sans Condensed", sans-serif; margin: 30px; text-transform: uppercase; }

.navegacao a{ color: floralwhite; font-weight: bold; }

2 respostas
solução!

Fala Rodrigo, td certo?

O truque aí é colocar um padding-bottom no main, tendo em mente que a estrutura é essa:

<header>...</header>
<main>....</main>
<footer>....</footer>

Detalhe, o valor do padding precisa ser maior que a altura do footer, ou seja, se o footer tem ao todo 40px de height, coloque 70px de padding-bottom no main que sobrará 20px de espaço em branco em relação ao footer.

;-)

Muito obrigado Leandro, deu certo! Eu estava colocando o padding-bottom no body... dai não vai nunca rsrsr... Vlw.

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