Layout "pie abajo" con independencia de su contenido y altura [ejemplo]

[kseso?]

A raíz de una consulta demandando una estructura de pie abajo (que no ha sido la primera ni será la última), hdenninson, además de otra solucción, planteaba lo siguiente:

Iniciado por hdennison

La única pega es que necesitas saber el alto del footer, por lo demás funciona a las mil maravillas

Eso me hizo recordar uno de mis juegos con css que quedaron relegados al olvido.
Pensé, bueno, tampoco debería ser una cuestión imposible. Creo.
Así que vamos a intentarlo y someterlo al análisis y los test de quien quiera y pueda.

Pero antes unas consideraciones.

Las estructuras del tipo "pie abajo" se deberían plantear sólo en unos casos muy concretos y con unas variables muy delimitadas.
Intentar cubrir todas y cada una de las posibles situaciones de todos y cada uno de los visitantes sólo con css sería pretender abarcar demasiado, y seguro que habrá al menos una donde falle.

En este supuesto, parto de unos contenidos mínimos en el cuerpo central, y que sean los del pie los que puedan variar y que se desconozcan en el momento de codificar el css.

Y todo el rollo precedente es para cubrirme las espaldas por los posibles fallos o malfuncionamiento de este entretenimiento que está en beta:
Pie abajo versión 3.

El footer aumenta su tamaño con el contenido, pero creciendo hacia arriba para evitar que aparezca el scroll.
Si son los contenidos del cuerpo central los que aumentan, fuerzan el desplazamiento del pie hacia abajo, apareciendo el sroll a partir de cierta altura de ellos.

Contras:
De momento he observado que si el contenido del footer y centrales son lo suficientemente extensos, llega un momento en que el pie se se sobrepone al contenido del "cuerpo principal" al aumentar éste.
--> Pero en esas circunstancias quizás el fallo esté en la elección de este tipo de estructura y se debería enfocar de otra manera.

Supongo que alguna cuestión más que corregir encontraréis, así que se agradecen los comentarios o sugerencias para ir puliéndolo.

[dargorg]

Acabo de encontrarle un fallito... en Firefox 3.6 en Mac, mira como se me ve:



Aún no he encontrado el porqué. Si consigo solucionartelo te lo comento,

Un saludo y gracias por tu aportación

[alexk]

dargorg bueno "error" lo que es error no, ya que

Código:

#pie {
background:none repeat scroll 0 0 #00C0F0;
bottom:0;
color:#FFFFFF;
left:0;
min-height:3em;
position:absolute;
width:100%;
}

tiene una altura minima, deberia ser fija la misma que

Código:

.empuje {
height:3em;
}

para que no se coma ese pequeño espacio ya que ahora "#pie" tiene mas altura que ".empuje", asi que funciona perfecto, yo suelo usar algo similar solo que con padding-bottom para no usar un div vacio, pero bueno funciona tambien chao y gracias por el aporte..

[kseso?]

Gracias dargorg y Alexk.

Pero no es un error. Es lo que ocurre en la contra que señalaba cuando me refería a los contenidos "suficientemente extensos". Como es lógico, dicha extensión está en relación al tamaño de la ventana.

No obstante, una vez más, gracias por la aportación.