css - siga - Haz que los div permanezcan en la parte inferior del contenido de la página todo el tiempo, incluso cuando hay barras de desplazamiento

posicionar div css

Question

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 pila.

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 permanecer allí incluso si se desplaza hacia abajo, por lo que ya no está en la parte inferior.

Imagen:

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

Answer 1

Desafortunadamente, no puede hacer esto sin agregar un poco de HTML adicional y tener una parte de CSS que se basa en otra.

HTML

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

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

CSS

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

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

Desafortunadamente, tienes que aplicar el padding-bottom a la #body que tiene la misma altura que el footer de footer para asegurarte de que el footer no se siente 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/

Answer 2

Esta es precisamente la position: fixed fue diseñada:

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

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

Answer 3

Esta es una solución intuitiva que utiliza el comando viewport que solo establece la altura mínima a la altura de viewport 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%;
}

Answer 4

He resuelto un problema similar al colocar 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 el alto de "externo" y el ancho y el 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 encuentra firmemente en la parte inferior de mi página y también se desplaza con la página (aunque sigue apareciendo dentro de la división "externa", pero felizmente fuera de la división principal de "contenido" que parece extraño, pero es donde lo quiero).

Answer 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 a 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 generada principal, así como a las etiquetas HTML y BODY para que esto funcione.

Answer 6

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

Posición: Solucionado solo funciona en Android 2.1 a 2.3 usando la siguiente metaetiqueta:

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

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

Answer 7

Si tiene un pie de página de altura fija (por ejemplo, 712px), 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";
}

Answer 8

Simplemente resolví otra solución, ya que el ejemplo anterior tiene 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 gire 30px para ver el pie de página.

Answer 9

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

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

Entonces, si todo su código HTML (dentro del cuerpo) se parece a lo siguiente:

<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 "sostenedor" recogerá su altura directamente desde "cuerpo".

¡Felicitaciones a My Head Hurts, cuya respuesta fue la que terminé trabajando!

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 contiene también tenga height: 100% configurado en la div. De lo contrario, la información sobre la altura se perderá entre "cuerpo" y "soporte".

Por ejemplo, lo siguiente, donde agregué la clase de "altura completa" a cada div para garantizar 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!

Answer 10

Usted no cerró su; después de la posición: absoluta. De lo contrario, su código anterior hubiera funcionado perfectamente!

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