Fácil CSS rodapé fixo
Tenho visto uma série de tutoriais lá fora, para saber como ter um rodapé fixo usando CSS. A maioria deles exigem todos os tipos de nested div's, envoltórios, e assim por diante. É realmente muito fácil, e esse código pode ser copiado e colado em quase todo o website modelo sem modificar todo o criado. Veja abaixo.
CSS arquivo: . footer_spacer ( height: 60px;) / * Essa altura deve ser igual ou superior à rodapé. garante o seu conteúdo não é cortado pelo seu rodapé * / # footer ( Posição: fixo; / * a mantém em movimento a partir de todo * / bottom: 0; / * a mantém na parte inferior da tela * / Largura: 100%; / * estende para preencher a largura do corpo tag * / height: 30px; / * define a estatural. Deve ser igual ou inferior ao footer_spacer altura * / )
HTML: <div class = "footer_spacer"> </ div> <! - Nada se passa aqui dentro. Isto é Só um espaçador. -> <div id = "footer"> Digite Rodapé Conteúdo Aqui </ div> <! - Este é o rodapé real. Use CSS para estilo às suas necessidades ->
E isso é tudo. O div footer_spacer cria um "tampão" abaixo o resto de sua página para o rodapé para descansar em, eliminando assim qualquer conteúdo de ser cortada. Se sua página da web usa carros alegóricos, continue a ler. Se assim não for, então você deve ser capaz de copiar e colar este existente em sua página web, sem problemas. Testado no IE7, FF2, FF3 e Safari. Deve funcionar tão bem no IE6.
Se você usar carros alegóricos, como fazem algumas das minhas páginas, você só tem de fazer uma pequena modificação. O footer_spacer div podem ter de ser aumentado para acomodar a posição de seus carros alegóricos. Também, não se esqueça de adicionar um <div "clear:both;"> style = </ div> antes do footer_spacer div para ter certeza de que ele está posicionado corretamente. Quaisquer questões ficando este a funcionar, se sentem livres para e-mail mim em dcostalis@gmail.com.
| 2.9 |
Stumble it! Post Info
Esta entrada foi postada no domingo, 9 de dezembro de 2007 e é arquivada sob css, desenvolvimento. Possui 1.229 visualizaçõesComentários Feed. | Deixe comentário | Deixe Trackback.
Anteriores Postar: Wordpress não é perfeito, e por isso é a minha gramática »
Próximo post: Service Pack 1 do Windows Vista RC1 »
19 de março de 2008 11:32
Oi,
obrigado pelo código acima, esse é realmente inacreditável que esta questão com rodapé fixo / cabeçalho pode ser alcançada de modo easyly com apenas algumas linhas do CSS.
Infelizmente ele não funciona no IE6. Poderia me informar como fazer chegar esta instalada e em funcionamento neste *** navegador também?
graças um lote
Robert
27 de março de 2008 23:26
Robert --
Obrigado pela observação! Uma coisa que eu notei é que o IE6 só vai deixá-lo a funcionar se você especificar o DOCTYPE. (mais no que está em http://www.w3.org/QA/2002/04/valid-dtd-list.html).
Em suma, adicione essa linha em lugares de topo da sua página:
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
e já deve funcionar muito bem no IE6. Obrigado novamente!
28 de abril de 2008 00:21
myspace layout div ...
Cumprimentos, ...
16 de maio de 2008 03:49
A transição DOCTYPE meio Quirks Mode no IE é o que vai introduzir todo o tipo de layout outros problemas. Se você se preocupam com a forma como ela olha no IE, esta técnica não é suficiente. (Sim, ele deveria ser só este simples, mas, na realidade, não é.)
16 de maio de 2008 18:30
Andrew -
VERDADEIRO. Tenho, no entanto, não notei nenhuma maneira de fazer IE6 comportar da maneira que ele deveria ou não ... se você precisar de transição ou estrito, haverá ainda questões que precisam ser tratadas ao tentar qualquer tipo de avançado layout.