Poniendo el pie de página en el fondo cuando la página está hecha de posicionamiento absoluto - html, css, css-position, footer, sticky-footer

Tengo una página donde las secciones están hechas de div "s absolutamente posicionados.

Eso funcionó muy bien hasta que traté de poner un pie de página en la página.

Mi problema es que no puedo usar el fondopropiedad para poner en un pie de página porque la propiedad inferior lo arregla en la parte inferior de la pantalla, no en la página. Entonces, cuando el contenido de la página es más largo que la pantalla, entonces el pie de página va por debajo del contenido.

Y no puedo poner el pie de página en la parte inferior deel flujo de elementos porque no hay flujo de elementos. Todos los div están absolutamente posicionados, así que si coloco algo que esté estático o relativamente posicionado, va directamente a la parte superior de la página debajo de mi encabezado.

Y ninguno de esos pies de página pegajosos funciona porque dependen del flujo de elementos para colocar el pie de página en la parte inferior de la página.

Aquí está el jsbin: http://jsbin.com/oxefev/edit#javascript,html

Este problema sería extremadamente fácil de solucionar si hubiera una manera de hacer que bottom css property ir al final de la página en lugar de la pantalla.

Editar: Podría simplemente dejarlo estático y usar el margin-top propiedad para forzarlo al final de la página configurándolo margin-top:1000px; pero luego tendría que cambiar eso cada vez que agregué o eliminé contenido de la página.

Respuestas

Mi primera recomendación sería: no posicionar absolutamente todo. ¿Qué beneficio es?

Sin embargo, puede lograr lo que busca con la aplicación de javascript. Algo como:

document.getElementById("footer").style.top = document.getElementById("content-wrapper").clientHeight + 150 + "px";

EDITAR:

Esto también parece funcionar y no necesitará alteración si ajusta la altura de su encabezado (+/- algunos píxeles según los modelos de caja):

document.getElementById("footer").style.top = document.body.clientHeight + document.getElementById("footer").clientHeight + "px";

jQuery (document) .height () devuelve resultados cruzados correctos y consistentes para mí. Una vez que sepa la altura del posicionamiento del contenido, el pie de página debe ser fácil.