¿Cómo pegar un pie de página al pie en css?

Question

estoy teniendo el problema clásico para el posicionamiento de un pie de página en la parte inferior del navegador. He intentado métodos incluyendo http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ pero sin buen resultado: mi pie de página siempre sigue apareciendo en el medio de la ventana del navegador, tanto en FF y el IE.

En el HTML Tengo esta estructura simple

<form> 
... 
<div class=Main /> 
<div id=Footer /> 
</form> 

Aquí está el código CSS que es relevante para el problema css pie de página:

* 
    { 
     margin: 0; 
    } 


html, body 
{ 
    height: 100%; 
} 


    #Footer 
    { 
     background-color: #004669; 
     font-family: Tahoma, Arial; 
     font-size: 0.7em; 
     color: White; 
     position: relative; 
     height: 4em; 
    } 



    .Main 
    { 
     position:relative; 
     min-height:100%; 
     height:auto !important; 
     height:100%; 

     /*top: 50px;*/ 

     margin: 0 25% -4em 25%; 

     font-family: Verdana, Arial, Tahoma, Times New Roman; 
     font-size: 0.8em; 
     word-spacing: 1px; 
     line-height: 170%; 
     /*padding-bottom: 40px;*/ 
    } 

Dónde estoy haciendo mal? Realmente lo he intentado todo. Si me perdí alguna información útil, hágamelo saber.

Gracias por cualquier sugerencia con anticipación.

Saludos,

---

gracias a todos por sus respuestas. funcionó con:

position:absolute; 
    width:100%; 
    bottom:0px; 

posición de ajuste: fijo que no funcionó en el IE por alguna razón (todavía mostraba pie de página en el medio del navegador), sólo trabajó para FF.

Answer 1

Intente configurar los estilos de su pie de página en position:absolute; y bottom:0;.

Answer 2

#Footer { 
    position:fixed; 
    bottom:0; 
} 

Eso hará que el pie de página permanezca en la parte inferior de la ventana del navegador, sin importar dónde se desplace.

Answer 3

tuve un problema similar con este tutorial pie de página pegajoso. Si falla la memoria, tiene que poner sus etiquetas de formulario dentro de su sección < div class=Main /> ya que la propia etiqueta de formulario provoca problemas con la alineación.

Answer 4

#Footer { 
position:fixed; 
bottom:0; 
width:100%; 
} 

trabajó para mí

Answer 5

Si se utiliza el "position: fixed; inferior: 0;" su pie de página siempre aparecerá en la parte inferior y ocultará su contenido si la página es más larga que la ventana del navegador.

Answer 6

Creo que mucha gente está buscando un pie de página en la parte inferior que se desplaza en lugar de ser reparado, llamado pie de página adhesivo. Los pies de página fijos cubrirán el contenido del cuerpo cuando la altura sea demasiado corta. Usted tiene que fijar el html, cuerpo, y el recipiente página a una altura de 100%, ajuste el pie de página a la posición inferior absoluta. El contenedor de contenido de su página necesita una posición relativa para que funcione. Su pie de página tiene un margen negativo igual a la altura del pie de página menos el margen inferior del contenido de la página. Ver la página de ejemplo que publiqué.

Ejemplo con notas: http://markbokil.com/code/bottomfooter/

Answer 7

Esto funcionó para mí:

.footer 
{ 
    width: 100%; 
    bottom: 0; 
    clear: both; 
} 

Answer 8

La siguiente propiedad css lo hará

position: fixed; 

espero que esto ayuda.

Answer 9

#footer{ 
position: fixed; 
bottom: 0; 
} 

http://codepen.io/smarty_tech/pen/grzMZr