Haga que div permanezca al final del contenido de la página todo el tiempo, incluso cuando haya barras de desplazamiento
Estoy buscando implementar el comportamiento opuesto a la siguiente pregunta: CSS Push Div al final de la página . Es decir, cuando el contenido se desborda en las barras de desplazamiento, me gustaría que el pie de página esté en la parte inferior de la página, como Stack Overflow.
Tengo un div con id="footer"el siguiente CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
Esto mueve el div a la parte inferior de la ventana gráfica, pero el elemento permanece allí incluso cuando desplazas la página hacia abajo, por lo que ya no está en la parte inferior.
¿Cómo puedo asegurarme de que el div permanezca en la parte inferior del contenido de la página incluso cuando el contenido se desborde? No busco un posicionamiento fijo, solo que el elemento esté al final de todo el contenido.
Imagen:
Precisamente position: fixedpara esto fue diseñado:
#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 más de HTML y hacer que una pieza de CSS dependa de otra.
HTML
Primero necesitas envolver tu headery footeren #bodyun #holderdiv:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
Luego configúrelo height: 100%en htmly body(cuerpo real, no su #bodydiv) para asegurarse de que pueda establecer la altura mínima como porcentaje en los elementos secundarios.
Ahora configúrelo min-height: 100%en el #holderdiv para que llene el contenido de la pantalla y utilícelo 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 el footerpara asegurarse de que footerno se encuentre 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 práctico, cuerpo breve: http://jsfiddle.net/ELUGc/
Ejemplo práctico, cuerpo largo: http://jsfiddle.net/ELUGc/1/
Si tiene problemas en asp.net, debe agregar 'altura: 100%' a la etiqueta FORM principal generada, así como a las etiquetas HTML y BODY para que esto funcione.
