Cómo alinear div en la parte inferior de la página, no en la parte inferior de la pantalla

Question

Quiero alinear un div en la parte inferior de la PÁGINA, no en la parte inferior de la pantalla. Cuando hago esto:

#contact-block{ 
position: absolute; 
    bottom: 0; left: 0; 
} 

, el div se coloca en el área inferior de la pantalla. Cuando mi página es larga, tengo que desplazarme hacia abajo y el div que debería haber estado en la parte inferior, flota en algún lugar en el medio.

Puede haber una solución simple para esto, pero simplemente no lo estoy viendo.

Aquí es mi HTML:

<div id="left"> 
<div id="submenu"> <span class="menutitle">Services</span> 
    <ul> 
    </ul> 
</div> 

<div id="contact-block"> 
<span class="contacttitle">Contact</span></div> 
</div> 
<div id="content"> 
</div> 

También he añadido un poco de imagen para ilustrar lo que quiero decir:

El rojo es el div div contacto.

He encontrado una solución con jQuery y CSS. Esta podría no ser la mejor solución, pero bueno, funciona.

jQuery:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60; 
$("#contact-block").css("top", offset); 
$("#contact-block").css("left", $("#wrapper").position().left); 

CSS:

#contact-block { 
position : absolute; 
width:216px; 
height:100px; 
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c; 
} 

Answer 1

La posición de su absolute elemento posicionado depende del primer antepasado-elemento, que no está posicionada static (que es el valor por defecto, por lo tiene que establecerlo explícitamente en relative (o absolute)).

Por lo tanto, asegúrese de que su contenedor #left tiene 100% documento-altura y position:relative, y todo está bien.

Answer 2

Es posible que desee ver columnas de igual altura: http://css-tricks.com/fluid-width-equal-height-columns/.

En casos sencillos esto puede ser suficiente (estoy asumiendo que su columna #left flota izquierda y derecha content columna de flota y no hay ningún otro elemento contenedor, simplemente body):

body { 
    position:relative; 
} 

#contact-block { 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

No se olvide de agregue el elemento más claro <div style="clear:both"></div> en la parte inferior de su body.

Answer 3

Puede colocar su posición div s en su lugar. Esta técnica requiere un elemento #wrapper, del cual no soy fanático, pero bueno, debes hacer lo que tienes que hacer.

En este ejemplo, eliminé por completo el #leftdiv, ya que solo era necesario para el diseño previsto y ya no es necesario.

HTML:

<div id="wrapper"> 
    <div id="submenu">This is services</div> 
    <div id="contact-block">This is contact</div> 
    <div id="content">This is content</div> 
</div>​ 

CSS:

#wrapper { 
    position: relative; 
    width: 960px; 
} 

#submenu { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 320px; 
    height: 320px; 
} 

#contact-block { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 320px; 
    height: 160px; 
} 

#content { 
    position: relative; 
    left: 320px; 
    right: 0; 
    top: 0; 
    width: 640px; 
    height: 640px; 
} 

//#content position is relative for the #wrapper to stretch. 
//The left property is equal to the width of the #submenu or #contact-block element 

Un buen punto de esta técnica es que se le da HTML más limpio. Creo que será más fácil crear una versión móvil de su versión si surge la necesidad.

The jsfiddle

pensamiento adicional: El elemento #wrapper podría ser fácilmente eliminado en favor de ustedes body elemento, que es un gran paso hacia la semántica HTML. Check this out!

Answer 4

Sugeriría poner el div rojo dentro del div largo derecho y al final del mismo. Luego use position: relative y márgenes izquierdos negativos en el div rojo para empujarlo hacia la izquierda. De esta manera, a medida que su div derecha se expande, su div rojo siempre permanece en la parte inferior.