Footer com mais de 100%

[stromdh 15]

Buenas amigos. estou desenvolvendo um site pra mim mesmo e estou me deparando com um problema o qual não estou encontrando solução (na real até encontrei, mas é sempre a mesma). Vamos ao problema...

 

Criei um site em wordpress que tem a header e abaixo uma div que eu nomei de root_content (que está dentro das outras divs do tema wordpress) e por fim o footer. O problema consiste em que estou tentando fazer com que a footer tenha height: 100% para que, quando o rodapé fique posicionado mais acima da página (quando a página tiver pouco conteúdo) a footer espiche até o final e fique um visual widescreen.

 

O caso é que quando defino para o footer um height: 100% ele passa o final da página gerando uma barra de rolagem desnecessária e ficando maior até mesmo que a imagem que ela carrega.

 

Questões importantes:

 

1º - não posso determinar a barra de rolagem fique escondida porque em determinados páginas deverá haver rolagem.

2º - não posso determinar uma altura específica para o footer porque conforme a resolução da tela do usuário, o footer não chega ao final da página, ou pode até ultrapassar o rodapé da página.

 

aqui está o link da página. se alguém poder me ajudar ficarei muito grato pois estou com este problema e sem solução aparente, pois já tentei todas as dicas desde maujor até várias outras ajuda que o google apresenta.

 

www.stromdhaus.com.br/site

[William Bruno 1501]

utilize a técnica deste tutorial:

 

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

[stromdh 15]

Utiliei a técnica deste tutorial o qual colocaste o link, mas não deu certo, pois quando seto o bottom:0, a base do footer fica no rodapé da página e o restante "tapa" a página. o que eu preciso saber é porque quando defino um height:100%, o footer fica maior do que deveria gerando a barra de rolagem.

 

Ele deveria esticar até o final da página e não ultrapassa-la como está ocorrendo.

Estou pensando que terei que refazer o tema do wordpress oque seria uma lástima, pois acredito que a solução seja simples, mas minha pouca experiência em html/css me limita a ficar em circulos uma vez que tentei os tutoriais e demais técnicas sem surtir o efeito desejado. Neste caso apelo para quem é expert, refazer o tema seria minha última opção.

 

Me ajudem.

[William Bruno 1501]

Utiliei a técnica deste tutorial o qual colocaste o link, mas não deu certo,

então você fez errado, mostre a sua tentativa, ou faça novamente.

 

o que eu preciso saber é porque quando defino um height:100%, o footer fica maior do que deveria gerando a barra de rolagem.

pq 100%, quer dizer toda a altura do elemento pai, e depende muito como estiver configurada a cascata do teu documento. Se estiver correto, 100% será toda a altura da viewport.

Ou seja, não é isso que você precisa fazer.

 

 

 

Ele deveria esticar até o final da página e não ultrapassa-la como está ocorrendo.

você conseguirá fazer isso, se aplicar corretamente o tutorial que postei.

[stromdh 15]

então você fez errado, mostre a sua tentativa, ou faça novamente.

 

pq 100%, quer dizer toda a altura do elemento pai, e depende muito como estiver configurada a cascata do teu documento. Se estiver correto, 100% será toda a altura da viewport.

Ou seja, não é isso que você precisa fazer.

 

 

 

você conseguirá fazer isso, se aplicar corretamente o tutorial que postei.

 

ok... vejamos...

 

1º - a estrutura do wordpress dentro do body tenho:

 

.main

.sheet

.sheet-body

.root_content

.footer

 

onde:

 

html{ height:100%}

body{ height:100%}

 

.main{position:relative; height:100%}

 

.sheet{position:relative; min-height:100%}

 

.sheet-body{position:relative; height:100%}

 

.root_content{position:relative; min-height:100%}

 

.footer{position:absolute; height:100%}

 

esta estrutura obedece a hierarquia que o wordpress lê, dentro dessa estrutura posso sim estar fazendo algo de errado, pois eu já havia lido este tutorial anteriomente a esta postagem, e mudei as alturas e posicionamentos das divs de acordo com o tutorial e não obtive sucesso então resolvi postar.

 

Então prezado amigo Willian Bruno... te peço que, se tu puderes, me indicar o que fiz de errado na adaptação do meu código para o do tutorial pois ainda não consegui fazer o footer esticar somente o necessário. já pensei em retirar o footer de dentro do sheet-body, mas no wordpress quando clico em footer no editor de temas, ele já mmostra o footer na raiz, logo abaixo mais umas 2 ou 3 tags de fechamento de divs e mais abaixo as tags que fecham o body e o html, dae não consegui colocar o footer na raiz. O canal seria dar uma olhada no site como firebug do ff pra ter uma visão macro, mas desde já, independente ou não de eu conseguir solucionar este problema, te agradeço a atenção.

[William Bruno 1501]

aplique uma altura fixa em px no footer, e não 100%.

 

e dessa mesma altura, coloque um padding-bottom para o conteudo antes dele.

[stromdh 15]

não resolveu... primeiro o footer criou uma pequena rolagem, dae eu reduzi o valor do padding-bottom e ficou um filetezinho vazio embaixo. conforme a resolução de quem estiver acessando o site este filete pode ficar bem maior, ou o site pode apresentar uma rolagem pequena com o filete.

[William Bruno 1501]

poste um link para o site, pois só analisando a cascata inteira, temos como dizer alguma coisa.