David, eres un crack! Qué respuesta tan currada! Gracias, aunque no fuera
para mi.
----- Original Message -----
From: "Maikel Naigt" <[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano" <[email protected]>
Sent: Tuesday, December 20, 2005 11:07 AM
Subject: Re: [Ovillo] Espacio despues del pie.
Bueno, básicamente es problema de que no le indicas que el elemento
#container ocupe "todo el alto de su contenedor [body] exceptuando el alto
del pie #footer". Esto explicado así no vale para nada, así que te lo
explico con manzanas que lo entenderás mejor.
1. Tenemos que lograr que #container ocupe el 100% de alto de la página
(exceptuando los 30px que mide el #footer). Pues obviamente, necesitaremos
añadir a #container la propiedad 'height: 100%' (exactamente tendría que ser
100%-30px pero ya sabemos que es imposible). Vemos que inicialmente no hace
nada. Esto es porque un elemento escalado a porcentaje, calculará ese
porcentaje en función de las medidas CONOCIDAS de su padre, o elemento
contenedor. En este caso hablamos de aplicar un porcentaje en altura, y
necesitamos que el elemento padre (BODY) tenga una altura conocida. De nuevo
solo se nos ocurre aplicar al 100%, y seguimos subiendo en la jerarquía de
contenedores padre llegando al PADRE de toda la página, que no es ni más ni
menos que HTML. Afortunadamente este contenedor siempre sabe las dimensiones
de su padre (el espacio que el navegador reserva para mostrar el contenido
de las páginas web) con lo cual, al aplicar un 'height: 100%' a este, tendrá
asignado automáticamente una altura conocida, propagándose ésta al BODY y de
ahí al #container. Este embrollo quedaría tal que así (tendrás que añadirlo
a tu hoja de estilos):
html { height: 100%; }
body { height: 100%; }
#container { height: 100%; }
2. El #footer, al estar flotado a la izquierda se sitúa automáticamente bajo
el último contenido, esto es, bajo el último DIV.blog-entry. La solución es
eliminar el flotado y situarlo absolutamente en una posición fija, más
exactamente a distancia '0' del borde inferior 'bottom: 0'. Lamentablemente,
IE no entiende la propiedad 'position: fixed' que tan bien nos viene así que
tendremos que arreglarlo para que IE haga lo mismo con 'position: absolute'.
Como a mi me gusta que las propiedades se usen para lo que fueron pensadas,
pues ponermos el 'fixed' para los navegadores y el 'absolute' para el otro,
así:
#footer { position: fixed; bottom: 0; }
* html #footer { position: absolute; } /* Con hack para IE incluido */
3. Comprobamos que tenemos un problema en los navegadores, consistente en
que cuando el navegador es más corto en altura que el contenido, al
desplazar el contenido mediante la barra de desplazamiento vemos con horror
que el fondo de #container simplemente no está. Ls solución está clara (para
mi, que llevo dos cafés), tendremos que cambiar la propiedad 'height: 100%'
por 'min-heigt: 100%'. Como IE, de nuevo, no entiende el "complejo" lenguaje
CSS en toda su magnitud, tendremos que dejarle a él con su 'height: 100%'
(afortunadamente para nosotros, obtenemos el mismo resultado que si
aplicáramos min-height), quedando como sigue:
#container { min-height: 100%; }
* html #container { heiht: 100%; } /* Con hack para IE incluido */
4. Parece que ya está todo bien. En modo 'expandido' aparece el #footer en
su sitio y el #container se expande hasta abajo. En modo 'contraido' también
pero... ¡leñe! si hay un cacho que no se ve en la última entrada de
#blog-entry. Evidentemente es el #footer el que lo tapa. Una solución rápida
(aunque imagino que las habrá mejores) es darle un espacio interno a
#container en la parte inferior para que el texto que contiene no lo ocupe
y, por tanto, no quede oculto por el #footer. Como el #footer mide 30px de
alto, con esta distancia mínimo nos será suficiente. Así quedaría el
parchecillo:
#container { padding-bottom: 30px; }
(Tiene un problema secundario y es que la ventana del navegador siempre
tendrá activa la barra de scroll vertical. Una solución más "limpia" sería
añadir siempre un <div> vacío de 30px de alto después del último .blog-entry
que tuviéramos, que sería el que quedaría oculto)
5. Bueno, y ahora vamos a por IE. Aquí el único problema que
teníamos/tenemos es que la posición del #footer no está fija, con lo cual,
aunque al abrir la página todo se vea correcto, si realizamos un scroll
vertical en el navegador, #footer se irá hacia arriba. Bueno, ya que #footer
está situado absolutamente con respecto a HTML, tendremos, obviamente, que
evitar que HTML tenga scroll valiéndonos de la propiedad 'overflow: hidden'.
Los daños colaterales son que automáticamente la página no tendrá scroll
vertical, con lo que si la altura del navegador es menor que la del
contenido que alberga este, aparecerá incompleto. Pensando un poco vemos que
este contenido está también dentro de BODY, así que nada más sencillo que
utilizar el scroll que nos pueda proporcionar este último mediante la
propiedad 'overflow' poniéndola a 'scroll' (bien, excepto que nos muestra
siempre las dos barras de scroll con el impacto estético que conlleva), o a
'auto' (mejor, así solo muestra la barra de scroll vertical cuando lo
necesita). Esto es lo que añadimos:
* html { overflow: hidden; } /* Con hack para IE incluido */
* html body { overflow: auto; } /* Con hack para IE incluido */
Finalmente, este es el código que hay que añadir en tu hoja de estilos para
que muestre la composición como deseas, (aparte tienes que eliminar la
propiedad 'float: left' de #footer), en IE/Win, FF/Win y Opera 8.5/Win:
html { height: 100%; }
body { height: 100%; }
#container { min-height: 100%; padding-bottom: 30px; }
#footer { bottom: 0; position: fixed; }
/* Hacks para aplicar propiedades a IE unicamente */
* html { overflow: hidden; }
* html body { overflow: auto; }
* html #container { height: 100%; }
* html #footer { position: absolute; }
/* Fin de Hack */
Te planto este rollo, que seguramente me ha costado a mi más escribir que a
ti leer, porque creo que dar únicamente la solución al problema sin explicar
los "por qués" es un 'pan para hoy, hambre para mañana'. Lo mejor es que
sepas el por qué del uso de las distintas propiedades en el problema y
entonces tendrás iniciativa para modificar lo que mejor se adapte a tus
necesidades presentes o futuras.
Si de todas maneras, con lo leido no te aclaras, por la red de redes hay
varios tutoriales de como alcanzar igual o similar objetivo. Pero de esta
búsqueda ya te dejo encargado a ti ;)
Un saludo, David Merino.
On 12/20/05, Robhert <[EMAIL PROTECTED]> wrote:
Hola a todos,
Bueno mi problema es q' veo q' mi pagina tiene un espacio entre el footer
y
la parte inferior de la ventana del explorador cuando yo quiero q' este
exactamente al tope.
Para que me entiendan mejor les dejo la web (aun esta en diseño)
http://robhert.nipl.net/pro/joha/index.php y quiero q' se vea asi:
http://robhert.nipl.net/espacio.jpg
Agradezco de antemano vuestra ayuda.
--
--------------------------------------------------------------------
email: robhert[at]gmail[dot]com
blog: www.robhert.tk
website: www.dropsdesign.tk
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
