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

262

CSS Push Div en la parte inferior 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 Stack Overflow.

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: Ejemplo

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

css positioning css-position footer H Bellamy
fuente
1
intente position:fixed, aunque esa no será exactamente la mejor manera de hacerlo
redDevil
Posición de prueba: relativa en el cuerpo.
1
no cerraste tu; después de la posición: absoluta. hubiera funcionado perfectamente de lo contrario!
AlexHighHigh

Respuestas:

546

Esto es precisamente para lo que position: fixedfue diseñado:

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

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

Joseph Silber
fuente
65
Esa solución no es buena para el 90% de los casos. si cambia el tamaño de su ventana, su pie de página superpondrá otro contenido y no se detendrá justo al final de su contenido
vsync
10
@aroth eso se debe a que son dos soluciones totalmente diferentes. Esta solución mantendrá el pie de página en la parte inferior del área visual de la pantalla en todo momento. La solución alternativa mantiene el pie de página en la parte inferior de la pantalla o en la parte inferior de la página, dependiendo de cuál sea más grande, que fue lo que solicitó el autor de la pregunta.
Me duele la cabeza el
66
@ MyHeadHurts: tienes toda la razón. Después de responder, me di cuenta de que esto no era lo que quería el OP, pero lo dejé aquí para las personas que buscan un pie de página fijo simple. De los comentarios (y votos) parece que muchas personas están luchando con esta característica de CSS elemental.
Joseph Silber
1
@ MyHeadHurts: es justo, aunque por mi dinero, ambos siguen siendo básicamente lo mismo. El contenido se desplaza debajo del fixedpie de página, cuando hay suficiente contenido para hacerlo. Eso es lo suficientemente bueno para mí. Por supuesto, puedo ver cómo los pies de página muy grandes como lo que tienen en stackoverflow no funcionarían bien con el fixedenfoque, pero para un pie de página básico de una línea, este enfoque funciona bien en mi opinión.
Aroth
@ Aroth Estoy de acuerdo, esta es una buena solución y todo depende de lo que quieras. Solo estaba señalando por qué una solución era más complicada que la otra -> no hacen lo mismo.
Me duele la cabeza el
188

Desafortunadamente, no puede hacer esto sin agregar un poco de HTML adicional y hacer que una pieza de CSS dependa de otra.

HTML

Primero necesitas envolver tu header, footery #bodyen un #holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

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

Ahora configúralo min-height: 100%en el #holderdiv para que llene el contenido de la pantalla y úsalo position: absolutepara colocar el pie de página en la parte inferior del #holderdiv.

Desafortunadamente, debe aplicar padding-bottomal #bodydiv que tiene la misma altura que footerpara asegurarse de que footerno se encuentre por encima 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/

Me duele la cabeza
fuente
No puedo entender por qué ancho: 100%; es obligatorio
Somnath Kharat
44
@sTACKoVERFLOW: si no especifica uno width o ambos left y rightluego los valores se establecen en autoy el elemento se ajustará para ajustarse a su contenido. Especificar width: 100% o left: 0 y right:0garantiza que el elemento en posición absoluta ocupa todo el ancho del elemento contenedor
My Head Hurts
Estaba buscando un comportamiento similar, pero en mi caso el #body div flota, diciendo "float: left". El ejemplo de cuerpo corto funciona, pero el ejemplo de cuerpo largo no. Alguna sugerencia de cómo puedo obtener el comportamiento deseado usando float en el #body div.
Jatin
@Ian dijo, en una respuesta porque no tenía suficiente representante para comentar: si tiene problemas en asp.net con la respuesta de 'Me duele la cabeza', debe agregar 'altura: 100%' a la página principal generó la etiqueta FORM, así como las etiquetas HTML y BODY para que esto funcione.
msouth
Si está tratando de hacer que esto funcione dentro de un div en lugar de dentro de todo el cuerpo, asegúrese de especificar height=100%en todos los elementos que lo contienen, incluidos los <form>elementos.
Ben Caine
13

Acabo de encontrar otra solución, ya que el ejemplo anterior tiene un 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

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Bueno, de esta manera no es compatible con el navegador antiguo, sin embargo, es aceptable que el navegador antiguo se desplace 30 píxeles hacia abajo para ver el pie de página

Anónimo
fuente
5

Me doy cuenta de que dice no usar esto para 'responder a otras respuestas' pero desafortunadamente no tengo suficiente representante para agregar un comentario en la respuesta apropiada (!) Pero ...

Si tiene problemas en asp.net con la respuesta de 'Me duele la cabeza', debe agregar 'height: 100%' a la etiqueta FORM principal generada, así como las etiquetas HTML y BODY para que esto funcione.

Ian
fuente
4

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

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

Comentaría si pudiera, pero todavía no tengo permisos, por lo que publicaré una pista como respuesta, para un comportamiento inesperado en algunos dispositivos Android:

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

<meta name="viewport" content="width=device-width, user-scalable=no">.

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

Tarciso Junior
fuente
2

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 ventana gráfica 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%;
}
Obromios
fuente
1

He resuelto un problema similar al poner todo mi contenido principal dentro de una etiqueta div adicional (id = "exterior"). 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 la altura de "pie de página". También he usado CSS para especificar el margen izquierdo y el margen derecho del "pie de página" como automático. El resultado es que el pie de página se encuentra firmemente en la parte inferior de mi página y también se desplaza con la página (aunque todavía aparece dentro del div "externo", pero felizmente fuera del div "contenido" principal, lo que parece extraño, pero es donde lo quiero)

David B
fuente
1

Solo quiero agregar: la mayoría de las otras respuestas funcionaron bien para mí; ¡Sin embargo, les llevó mucho tiempo hacer que funcionaran!

¡Esto se debe a que la configuración height: 100%solo recoge la altura del div padre!

Entonces, si todo su html (dentro del cuerpo) tiene el siguiente aspecto:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

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é poniendo a trabajar!

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

Por ejemplo, lo siguiente, donde he agregado la clase de "altura completa" a cada div para asegurarme de que la altura llegue hasta nuestros elementos de encabezado / cuerpo / pie de página:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

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

#full-height{
    height: 100%;
}

Eso solucionó mis problemas!

Tim L
fuente
0

Si tiene un pie de página de altura fija (por ejemplo, 712 px), puede hacer esto con js así:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
George Carlin
fuente
0 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
Praveen Kundu
fuente
Por favor describa en su respuesta, ¿cuál era el problema, y cómo este fragmento resolverlo, para ayudar a otros a entender esta respuesta
ZF
-2

utilizar la clase de arranque de fondo fijo

<div id="footer" class="fixed-bottom w-100">
Gowtham Sooryaraj
fuente
No hay indicación de que OP esté usando Bootstrap.
TylerH