Haga que div permanezca al final del contenido de la página todo el tiempo, incluso cuando haya barras de desplazamiento

CSS Push Div al final de la página

Mire ese enlace, quiero lo contrario: cuando el contenido se desborda a las barras de desplazamiento, quiero que mi pie de página esté siempre en la parte inferior completa de la página, como Desbordamiento de stack.

Tengo un div con id="footer" y este CSS:

 #footer { position: absolute; bottom: 30px; width: 100%; } 

Pero todo lo que hace es ir a la parte inferior de la ventana gráfica, y permanece allí incluso si se desplaza hacia abajo, por lo que ya no está en la parte inferior.

Imagen: Examlple

Lo siento si no se aclara, no quiero que se solucione, solo para que esté en la parte inferior de todo el contenido.

Esto es precisamente lo que position: fixed fue diseñado para:

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

Aquí está el violín: http://jsfiddle.net/uw8f9/

Desafortunadamente no puedes hacer esto sin agregar un poco de HTML adicional y tener una pieza de CSS dependiendo de otra.

HTML

Primero, debe ajustar su header , footer y #body en un div #holder :

 
.....
....
....

CSS

Luego configure la height: 100% en html y body ( body real, no su #body div) para asegurarse de que puede establecer la altura mínima como un porcentaje en los elementos secundarios.

Ahora configure min-height: 100% en el div #holder para que llene el contenido de la pantalla y use position: absolute para #holder el pie de página en la parte inferior de la div #holder .

Lamentablemente, debe aplicar un padding-bottom al #body div que tenga la misma altura que el footer de footer para asegurarse de que el footer no sobresalga de ningún contenido:

 html,body{ height: 100% } #holder{ min-height: 100%; position:relative; } #body{ padding-bottom: 100px; /* height of footer */ } footer{ height: 100px; width:100%; position: absolute; left: 0; bottom: 0; } 

Ejemplo de trabajo, cuerpo corto: http://jsfiddle.net/ELUGc/

Ejemplo de trabajo, cuerpo largo: http://jsfiddle.net/ELUGc/1/

Acabo de buscar otra solución, como el ejemplo anterior, tengo error (error en algún lugar) para mí. Variación de la respuesta seleccionada.

 html,body{ height: 100% } #nonFooter{ min-height: 100%; position:relative; /* Firefox */ min-height: -moz-calc(100% - 30px); /* WebKit */ min-height: -webkit-calc(100% - 30px); /* Opera */ min-height: -o-calc(100% - 30px); /* Standard */ min-height: calc(100% - 30px); } #footer { height:30px; margin: 0; clear: both; width:100%; position: relative; } 

para el diseño html

  
header,middle,left,right,etc

Bueno, de esta manera no es compatible con el viejo navegador, sin embargo, es aceptable para el viejo navegador para scrolldown 30px para ver el pie de página.

Me doy cuenta de que dice no usar esto para ‘responder a otras respuestas’, pero desafortunadamente no tengo suficientes representantes para agregar un comentario en la respuesta apropiada (!) Pero …

Si tiene problemas en asp.net con la respuesta de ‘My Head Hurts’, debe agregar ‘height: 100%’ a la etiqueta FORM principal generada, así como tags HTML y BODY para que esto funcione.

No cerraste tu; después de la posición: absoluto. De lo contrario, su código anterior hubiera funcionado perfectamente.

 #footer { position:absolute; bottom:30px; width:100%; } 

Me gustaría comentar si pudiera, pero aún no tengo permisos, por lo que publicaré una sugerencia como respuesta, por comportamiento inesperado en algunos dispositivos Android:

Posición: Fixed solo funciona en Android 2.1 a 2.3 utilizando la siguiente metaetiqueta:

 . 

ver http://caniuse.com/#search=position

Esta es una solución intuitiva que utiliza el comando de ventana gráfica que solo establece la altura mínima a la altura de la vista menos la altura del pie de página.

 html,body{ height: 100% } #nonFooter{ min-height: calc(100vh - 30px) } #footer { height:30px; margin: 0; clear: both; width:100%; } 

si tiene un pie de página de altura fija (por ejemplo, 712px) puede hacer esto con js de esta manera:

 var bgTop = 0; window.addEventListener("resize",theResize); function theResize(){ bgTop = winHeight - 712; document.getElementById("bg").style.marginTop = bgTop+"px"; } 

He resuelto un problema similar al poner todo mi contenido principal dentro de una etiqueta div adicional (id = “outer”). Luego moví la etiqueta div con id = “pie de página” fuera de esta última etiqueta div “externa”. He usado CSS para especificar la altura de “exterior” y he especificado el ancho y alto de “pie de página”. También he usado CSS para especificar el margen izquierdo y el margen derecho de “pie de página” como automático. El resultado es que el pie de página se asienta firmemente en la parte inferior de la página y se desplaza también por la página (aunque sigue apareciendo dentro del div “externo”, pero felizmente fuera del div principal de “contenido”, que parece extraño, pero es donde yo quiero).

Solo quiero agregar que la mayoría de las otras respuestas funcionaron bien para mí; sin embargo, tomó mucho tiempo para que funcionen.

Esto se debe a que establece la height: 100% solo recoge la altura div de los padres.

Entonces, si todo su html (dentro del cuerpo) se ve así:

 
.....
....
....

Entonces lo siguiente estará bien:

 html,body{ height: 100% } #holder{ min-height: 100%; position:relative; } #body{ padding-bottom: 100px; /* height of footer */ } footer{ height: 100px; width:100%; position: absolute; left: 0; bottom: 0; } 

… como “titular” recogerá su altura directamente del “cuerpo”.

¡Felicitaciones a My Head Hurts, cuya respuesta fue la que terminé por ponerme a trabajar!

Sin embargo. Si su html está más nested (porque es solo un elemento de la página completa, o está dentro de una columna determinada, etc.), entonces necesita asegurarse de que cada elemento que lo contiene también tenga height: 100% establecido en el div. De lo contrario, la información sobre la altura se perderá entre “cuerpo” y “titular”.

Por ejemplo, el siguiente, donde agregué la clase de “altura completa” a cada div para asegurarme de que la altura llega hasta nuestros elementos de encabezado / cuerpo / pie de página:

 
.....
....
....

Y recuerde establecer la altura en la clase de altura completa en el CSS:

 #full-height{ height: 100%; } 

Eso solucionó mis problemas!