¿Cómo hacer que el último div tramo llene la pantalla?

Tengo un sitio que intento construir y me he topado con un pequeño inconveniente que me está volviendo loco. Esencialmente, en las páginas sin suficiente contenido para llenar la ventana gráfica, quiero que el último div (mi pie de página) llene el resto de la ventana gráfica, pero actualmente está cortado.¿Cómo hacer que el último div tramo llene la pantalla?

Mi HTML se parece a esto:

<body> 
    <div id="header"> </div> 
    <div id="subNav"> </div> 
    <div id="content"> </div> 
    <div id="footer"> </div> 
</body>

He intentado utilizar html, body, footer { height:100%; } sino que crea mucho más espacio que necesita, esencialmente, una longitud de pantalla completa de contenido en blanco en el pie de página.

¿Cómo obtengo mi pie de página solo para llenar el resto de la pantalla sin agregar una barra de desplazamiento?

Gracias de antemano, One Frustrated Coder.

Fuente

2010-03-12 Conor

Estoy bastante seguro de que la única manera de hacerlo es calculando el resto absoluto alto.

I.E, con jQuery

$('#footer').height(($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px");

Usted quiere hacer esto por cambiar el tamaño de la ventana para permitir una ventana dinámica de cambio de tamaño.

$(window).resize(function(){...});

Fuente

2010-03-12 19:49:56

Sí, no se puede hacer bien sin javascript. – gingerbreadboy

¿Sería un poco más limpio un método que utiliza la posición superior de #content relativa al documento, y luego calculando la diferencia a la altura del documento? –

Si usted no quiere ir a la ruta de jQuery, la versión de los pobres de este #content está dando una altura min que hacer que funcione en la mayoría de las pantallas, y/o por darle a su montón de pie de página de relleno en la parte inferior. Podría disparar una barra de desplazamiento en algunos casos, ya que solo estás controlando qué tan corta puede ser la página.

(O simplemente puede aceptarlo como una limitación del medio. Desbordamiento de pila, por ejemplo, acaba de flotar su pie encima de un espacio en blanco si la página es demasiado corta.)

Fuente

2010-03-12 20:05:56

Sé que esto es de 10 meses de retraso entonces probablemente ya descubrió algo. Pero aquí hay una solución que yo uso.

(lo siento, por alguna razón no puedo hacer que el código funcione bien para mostrarte el código.) Básicamente envuelve un div llamado "contenedor", o algo así, alrededor de todos los demás divs excepto el pie de página. El pie de página div estará justo debajo del contenedor div con todos los demás dentro del contenedor.

Establezca el color de fondo de su estilo de cuerpo para que sea lo que quiere que su relleno esté en la parte inferior. Entonces, el color de fondo del contenedor div sería el color de fondo de su cuerpo. De modo que todo lo que vaya al pie de página será lo que usted quería que fuera el color de fondo y luego el color de fondo del cuerpo llenará el resto de la página.

Fuente

2011-02-04 15:45:06 astonishedman

¿Cómo hacer que el último div tramo llene la pantalla?

Respuesta

Cuestiones relacionadas