Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, estou tendo uma senhora dor de cabeça aqui...
estou montando um layout que possui uma tecnica css para manter o rodapé width: 100%; sempre no rodapé... até ai tudo bem... o problema é o seguinte...
dentro dessa div "pai" (palco) eu possuo outras 2, que são: header e conteudo.
Preciso fazer com que o conteudo fique com height: 100%, já tentei de várias formas que conheço e simplismente não consigo...
Será que alguem poderia dar uma luz?
CSS
html, body { height: 100%; background: #d9d9c3; }
#palco { height: 100%; background: url(../images/bg_palco.png) repeat-x top; }
body > #palco {
height: auto;
min-height: 100%;
}hr { display: none; }
/ Clear Fix /
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}.clearfix { display: inline-block; }
/ Hides from IE-mac /
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/ Fim Clear Fix /
#header, #conteudo, #bottom div {
width: 780px;
margin: 0 auto;
position: relative;
}#header { padding: 0 20px; width: 740px; height: 143px; background: orange; }
#conteudo { padding: 0 20px 102px; width: 740px; background: white; }
#bottom { position: relative; clear: both; margin: -82px 0 0 0; height: 82px; background: brown; }
HTML
<div id="palco">
<div id="header">
</div>
<hr />
<div id="conteudo" class="clearfix">
</div>
</div>
<hr />
<div id="bottom">
</div>Exemplo sem texto na div conteúdo: http://logmania.net/exemplo2.html
O site da tecnica é o seguinte: http://www.cssstickyfooter.com/
Fala William, cara nao consigo abrir... tá dando erro do gateway
Opa então... segui o tutorial... mais o mesmo problema ocorre... o conteudo não fica 100% é utilizada uma imagem para isso, só que eu não posso usá-la porque no caso do exemplo do maujor a div "tudo" eu tenho um outro background que fica por cima do background do body... =/
Ps: funciona perfeitamente no IE6, 7, 8 com o conteudo 100% mais no firefox não
Galera... será que isso é um bug no firefox ou no IE? cada tentativa me faz pensar algo diferente...
tentei agora pouco fazer da pior forma possivel... usando tabelas... mais também dá bug o rodapé não fica perfeito nos IEs... =/
Pessoal... pode fechar o tópico... desisti de fazer isso...
abs
Rasp,
em amos os browser mencionados por você estão iguais.
Onde está o erro?
Não desiste não. Agente ajuda. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Então Thiago...
Está normal pq está sem conteudo... acabo de colocar.. dá uma olhada no drama... já testei tudo que consegui imaginar até agora e sem dá problemas, ou num browser ou no outro...
Abs e valeu! ;)
Vamos primeiro ajeita o seu XHTML. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
[http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/seta.gif Por que colocar um código inteiro XHTML dentro de um comentário? Não entendi;
[http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/seta.gif Tire aquelas tabelas. Para o que deseja, não é necessário;
[http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/seta.gif Se sua tabela é quem vai ocupar todo o espaço da tela, para que um **background-color** nela e no **body**?Faça as modificações e volte a postar. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Respondendo suas perguntas...
Eu edito os arquivos diretamente dentro do servidor... por isso o codigo comentado, era o antigo e como não dá pra ficar copiando e colando o tempo todo prefiro comentá-lo... até pq não atrapalha em nada.
A questão dá tabela foi para efeito de testes...
A cor de background de fundo sabe-se que é para testar possiveis erros... a melhor forma de saber o "porque" de um erro é colorindo o elemento e caso não apresente problemas, remove-se a cor depois.
De toda forma, eu voltei as divs e coloquei também outro link lá em cima... um com texto na div conteudo e outro sem para visualizarem o problema que não está me deixando dormir. rs
Absss e valeu a ajuda.
Tive que dar uma simplificada no código, para você entender melhor como funciona a técnica para o efeito.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) lang="pt-br">
<head>
<style type="text/css"> margin: 0;
padding: 0;
border: 0;
color: #666;
font-family: Arial, "Trebuchet MS";
font-size: 14px;
list-style: none;
text-decoration: none;
} background-color: gold;
} height: 100%;
}
#palco {
width: 740px; /* esse elemento é que vai fazer a técnica */
margin: 0 auto;
position: relative;
min-height:100%;
background: white; /* É aqui que temos o background do conteudo na verdade */
}
#header {
width: 740px;
height: 143px;
background: orange;
}
#conteudo {
width: 740px;
padding-bottom: 82px;
}
#bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 82px;
background: brown;
}
</style>
</head>
<body>
<div id="palco">
<div id="conteudo">
<div id="header">
</div><!-- /header -->
</div><!-- /conteudo -->
<div id="bottom">
teste
</div><!-- /bottom -->
</div><!-- /palco -->
</body>
</html> Percebi que você queria o rodapé em 100% de largura do browser.. para isso, eu colocaria uma imagem de backgrund com a cor do rodapé posicionada no bottom e com repeat-x no body. Poste uma imagem do layout final, se os backgrounds tiverem dando problemas para posicionar.. No link que você postou, não vejo imagens... apenas as cores puras.
Opa William... tudo certo cara?
Mais uma vez valeu pela ajuda ai... eu inclusive usei esse método só que o que acontece e eu também esqueci de falar aqui... esse layout foi projetado por um outro cara e eu possuo 2 background... até ai tudo bem pois coloco outra div com z-index: 1 atras do layout e um background no body, porém, fico pendente na questão do rodapé em ficar 100%, como você mencionou testei com imagem e fica bacana, porém tenho esse problema dos backgrounds.
Coloquei mais um link com seu exemplo mais a div onde entraria o outro background http://www.logmania.net/exemplo3.html, aí agora só não sei como fazer o rodapé 100%.
Abraços!
Para deixar o rodapé 100%, você coloca width: auto na div#palco e define uma largura exata para o elementos filhos que você deseja que não tenha 100% de width.
Abraços.
Então cara, ai para o rodapé, você faz como eu disse, posiciona um filete no body, com um background da cor do rodapé, e deixa ele bem grande(alto), e manda repetir apartir do bottom.
Qual seria o outro fundo ? pq esse, eu não vejo outra saída à não ter um elemento absoluto posicionado atrás de tudo com z-index..
@edit:
Acabei de pensar em outra coisa..
Se você colocar uma faixa com a largura do site, como background do #palco, com um back-position: center repeat-y, você pode tirar o limitador de width desse elemento, ai o rodapé voltaria à ter os 100% de width do body, já que o próprio #palco poderia ter os 100% de width tb... mas enfim.. poste um screen de como é o layout final, para analizarmos melhor e propormos a solução acertada para os posicionamentos das imagens de BG
Opa William e Thiago,
Juntei exatamente a dica dos 2 e consegui o resultado "simulando" a div #conteudo com ima imagem repetindo em y com o #palco a width 100%. mais tarde estarei disponibilizando o link com a questão resolvida.
Abraços e valeu a ajuda ;)
Tenta com isso aqui:
http://imasters.com.br/artigo/9065/css...aixo_da_janela/