Haciendo que la imagen del pie de página se adhiera a la parte inferior del navegador web o página

Question

Sé que esto se me ha preguntado muchas veces en el pasado, pero por mi vida parece que no puedo lograr que ninguna de las otras soluciones funcione.

Lo que trato de hacer es hacer que el pie de página (que es una imagen que se repite en todo el ancho de la página) se adhiera a la parte inferior del navegador cuando no hay suficiente contenido para empujarlo naturalmente al final de la página y cuando hay suficiente contenido para presionarlo hacia abajo, lo hace. Un ejemplo es el de http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm que hace exactamente lo que yo quiero, pero tampoco puedo ponerme a trabajar.

El código que actualmente tengo implementado hace que el pie de página se adhiera a una determinada sección de la página con el texto debajo. Puedes verlo en sourcectrl.co.uk pero no hay mucho que mirar. Aquí está el código para su placer visual.

html, body { 
font: 100% Arial, Helvetica, sans-serif; 
height: 100%; 
color: #597347; 
margin: 0; 
padding: 0; 
background: #573909; 
} 

header { 
    display: block; 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 66px; 
    background: url(../images/FillerPage_01.gif) repeat-x left bottom; 
} 

section { 
    width: 940px; 
    margin: 0 auto; 
    font-size: 1.4em; 
    overflow: auto; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: 87px; 
    position: relative; 
    padding-bottom: 90px; 
} 

footer { 
    display:block; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 87px; 
    background: url(../images/FillerPage_08.gif) repeat-x left bottom; 
} 

Lo siento si parece desordenado! Solo me gustaría saber si voy en la dirección correcta o hay algo que no estoy obteniendo. Oh, sí, estoy tratando de hacer todo esto con el marcado html 5, que es la razón por la cual no hay #footer y similares (¿podría ser esta la razón por la que ninguna de las soluciones funciona?).

Si alguien pudiera darme alguna ayuda u orientación estaría tan agradecido.

Answer 1

Esta es la fuente que me ayudó a lograr un diseño de este tipo:

http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx

Answer 2

Creo que el código que está buscando está aquí:

http://www.themaninblue.com/writing/perspective/2005/08/29/

He implementado esto sólo ahora en mi sitio, ¡y está funcionando genial!

Hace tiempo que hiciste tu pregunta, pero espero que esto ayude.

Answer 3

poner todo en el Principal en una envoltura y utilizar el siguiente código:

html, body, form 
{ 
    height: 100%; 
} 

#wrapper 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different) 
} 

#footer, .push 
{ 
    height: 60px; (This is just the height of MY footer, change this to whatever size your footer is) 
}