¡<body> y <html> son tags también!
Para layouts sencillos (esto es, sin headers ni footers; que solo constan de 3 columnas); este efecto es muy útil. En la introducción les dije que seguramente han usado el atributo height: 100%; para lograr este efecto solo para notar que fue en vano. ¿La razón? ¡El body y el html también son tags!
El HTML y CSS
Volvamos a la página anterior donde les puse un ejemplo de nuestro layout con 3 columnas sin ninguna técnica para expandir las columnas hasta el fondo. Ahora bien, ¿qué pasara si agregamos esto a nuestro CSS?:
- #izquierda, #central, #derecha, #contenedor {
- height: 100%
- }
Supondriamos que nuestras columnas serían 100% altas ¿cierto? Pues no. La cuestión es que cuando aplicamos un porcentaje a nuestra altura, este es calculado en base al elemento padre. En este caso, nuestro elemento padre es el <body> y el <html>, y ambos tags seguirán el comportamiento por default de expandirse hasta donde necesiten expandirse. Por lo tanto, si agregamos el alto a estos dos tags, tendremos nuestras columnas 100% altas.
- html, body, #izquierda, #central, #derecha, #contenedor {
- height: 100%
- }
Les dejo el ejemplo de la técnica de aplicar 100% al <body> y al <html>.
Las desventajas
- Esta técnica es SUMAMENTE frágil. Cualquier cambio en el estilo o la estructura podría arruinar todo.
- En algunos navegadores no funciona del todo bien.
- En layouts complejos es practicamente inútil.
¿Qué? ¿Ninguna de las dos técnica te ha parecido suficiente? ¡No os preocupeis! Que he dejado la mejor para el final. 
Vaya! No conocía la última técnica y es simplemente excelente! Aunque me duela admitirlo hasta ahora solía tirar de la opción de la imágen de fondo... Gracias por compartirla!
Yo no conocía ninguna de las tres!
Muy buen tutorial, gracias
Genial enserio, es excelente poder ver el diseño de esa manera!
De peeelos!!!
Simplemente me quedo con la ultima xP
Gracias!!!!
Saludos y lo pondre a preubas sin dudas!
Saludos:
Acabo de probar (sobre windows XP SP2) el excelente tutorial que has escrito y estos son mis resultados:
Methodo 2
IE 6.0 SP2 : OK (las 3 columnas crecen hasta la barra de estado).
Safari 3.0.3 : KO (No se ve la imagen de fondo).
Firefox 2.0.0.6: OK
Methodo 2
IE 6.0 SP2 : la columna central es mas larga.
Safari 3.0.3 : OK.
Firefox 2.0.0.6: OK
Methodo 3
IE 6.0 SP2 : no logro ver ninguna columna.
Safari 3.0.3 : OK.
Firefox 2.0.0.6: OK
_argos: Me parece interesante que el último método no te haya funcionado en IE6, ya que a mi me funciona perfectamente. Una pregunta ¿Qué valor usaste para el margin y padding? ¿32768px? Si es así, ¿podrías subir tu código a algún lugar para revisarlo? De antemano, gracias.
Chicoblog: Yo también, es la más práctica que hay, sin embargo he visto un error ( mio, quizá ) extraño, cuando un anchor direcciona a un elemento del sitio ( #elemento ), el scroll empieza desde ahí y no se ve lo anterior. Metal.orgy si puedes hacer algo para ayudarme sería genial.
Hola,
a mi tampoco me aparece nada con la última opción en un IE6.0 sp2
qué lástima!
david: He subido una versión revisada del ejemplo de la última técnica que utiliza 32768px en lugar de 9999em. Visítala y dime si te va bien, que ya la he revisado en una computadora con IE6 por defecto y funciona perfectamente bien. Si sigue sin funcionar (Que no creo), tendré que actualizar y poner métodos alternativos para IE6.
xmas: No he entendido bien, pero creo que sé por qué es y, en dado caso, no es un error, sino el comportamiento normal de los elementos y muy probablemente una desventaja. Igual te pido un favor: sube un html simple donde se vea bien el error y veré que puedo hacer.
MeTaL_oRgY : Estaba por enviarte el codigo, pero probe con la version modficada y mi IE 6.0 SP2 funciona correctamente, salvo que las columnas llegan hasta el borde de la barra de estado, gracias por leer mi mensaje y brindar una pronta solucion.
_argos: Entonces el error si era el valor que había usado originalmente. experimento curioso: ve aumentando de a poco el valor de los pixeles en el segundo ejemplo y mira como va desapareciendo de a poco el contenido. IE se comporta de maneras extrañas... jajaja
¡Saludos!
xmas Hmm.... no había pensado en eso, y después de algo de investigación he descubierto que, si vas a usar anchors en la misma página dentro de las columnas, esta técnica no es la opción. Ahora actualizo el post.
WUAU! loco sos una maquina!
increible... me encanta esta pagina, justo cuando me topo con un problema diseñando, vengo aca y YA ESTA LA SOLUCION!!... grandioso trabajo amigo.
Gracias!!!
Wuau! de nuevo... muchisimas gracias metalize me dejaste asombrado xD
No sabes cuantos dolores de cabeza tuve para solucionar esto...gracias a ti..se han ido..
Saludos!
¡Felicidades! y ¡Gracias!
El problema que yo tengo, no se soluciona con estos ejemplos (tengo un diseño muy complicado, con muchos elementos) pero la lección de soluciones imaginativas es excelente.
Sin duda alguna une excelente tutorial para solucionar el problema con las divs en un contenido largo para alguna de ellas. Me habían preguntado de estos errores pero ahora creo que ya tengo la solución. Buen aporte! =)
hola
te escribo esto para decirte que en los feeds solo aparece la primera pagina del posteo. o sea, de ultima no es guaa un re impedimento, pero que se yo.
buen tutorial, saludos.
He probado el tercer método y funciona muy bien, excepto por un problema: si se le aplica un background a las columnas y nuestra maquetación posee un footer, este aparece tapado por las columnas, ¿alguna idea para solucionar esto?
Otro detalle: en el último código CSS que muestras aparece 32768pxem cuando debe ser 32768px [tienes que sacar los "em"]
Sergio: ¡Saludos! Gracias por avisarme del error en el post, ahora mismo lo arreglo.
En cuanto a tu problema, intenta aplicar position: relative al footer además de un z-index: 9999. Con eso debería de verse. 
¡Saludos!
Recuerdo haber visto la ultima tecnica antes... creo que en "The search for the perfect layout"?
Muy buenas explicaciones, felicitaciones.
Estas loco Rammy
[...] http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/ [...]
[...] En Metalize nos traen un excelente tip de diseño para quienes usamos CSS y en más de una ocasión nos hemos encontrado con la situación de que al usar columnas en nuestro layout estas no crecen al 100%. [...]
Excelente articulo.
Consulta en caso de agregar una img de fondo en
#contenedor {
width: 748px;
margin: 0 auto;
overflow: hidden;
background: white url(../images/fondo-bottom.gif) bottom left repeat-x ;
}
En IE7 - 6 no la veo en FF si, como puedo resolverlo, mgcias de ante mano
holaaaaaaa
ME ENCANTA EL CUARTETOOOOOOOOOOOOO
A MUERTE!!!!!!!!
cuarteto_victoria@hotmail.com
Mariana: Es algo difícil diagnosticar algo así. ¿Podrías subir tu código para echarle un ojo y así decirte bien qué es lo que pasa?
¡Saludos!
Lo he logrado Metal.ize!!! jodeer, y creiamos que era tan dificil...
char temp, world[5]="mundo";
int b=4;
for(int a=0; a=4; a++){
temp=world[a];
world[a]=world[b];
world[b]=temp;
b--;
}
veeees, ahora ya no es "mundo", ahora es "odnum", dio un giro de 180 grados...
He cambiado al mundo y ahi esta el codigo fuente !!!!!!!! XD
He descubierto un pequeño pero molestoso problema con la primera solución metal.orgy. Se trata de que hace la página un poco más pesada y sobretodo hace que los efectos AJAX o simplemene javascript se vean lentos, lo digo por experiencia, quité la imagen de fondo y todo era muy rápido. Tengo la teoría que como hay movimiento en la página, CSS trata de mantener el fondo para que no se mueva o algo así a causa de los movimientos que hay, lo que hace que haya un conflicto entre ambos y por eso se pone lento. Es la única explicación que puedo darle.
La ultima solucion no es del todo buena, no ?? ya que al esconder lo que sobra por abajo, se pierden cosas. Por ejemplo, simplemente que añadas bordes a las capas "#izquierda #derecha..." los bordes de abajo no se ven. Como solucionas eso ??
OIGAN! Decubrí la solución perfecta al alcance de todos, duele no haberla encontrado antes, está en Cristalab, miren: http://www.cristalab.com/tips/39039/columnas-variables-de-igual-altura-con-div-y-css
[...] Leyendo el artículo de metal.orgy pude observar 3 excelentes soluciones para lograr que las columnas de un diseño midan igual con respecto al contenido de alguna de ellas; lastimosamente, ninguna de las soluciones que planteó se adecuaron a mi diseño y me parecieron algo complicadas. [...]
[...] Ir al contenido Sin Comentarios, Comentario o Ping [...]
[...] En el blog de MeTaL_oRgY [...]
[...] Varias soluciones a la altura de las columnas [...]
Desde mi ignorancia, porq estoy comenzando a utilizar el CSS. No es posible hacer lo siguiente:
esquematicamente
en donde la tabla tengo un fondo q se corresponda con los colores de los div (o las imagenes), de esta forma si una columna crece (yo porq uso paginas dinamica y nose la altura de la columna) tambien crecera la tabla y por ende se vera la imagen de fonde de la misma.
Otra cosa la tabla va sin bordes ni margenes, y con el width al 100% asi dependera del superior. independizando las caracteristicas del layout de la tabla.
Puede q no este en lo correcto, pero a mi me vino de maravilla. Cualquier duda envienmen un mail q paso el codigo
Saludos
Seba
SanFernando-MalosAires-Argentina
No salio el esquema en el post :p
ahy va:
div>
table>
tr>
td>
div id="left"> /div>
div id="centro"> /div>
div id="rigth"> /div>
/td>
/tr>
/table>
/div>
saque los
Seba: Ouch... vamos seba, que este post trata exactamente de cómo hacer lo que quieres hacer, y sin necesidad de imagenes.
Echale un ojo a la página dos de este tutorial; que hace lo que tu, pero en lugar de usar una tabla (Que es un gran error de semántica) usa un div.
Tienes razon, pero en mi caso: con una web dinamica (.php) en donde la columna de la izquierda crece desmedidamente, no me sirve ningun ejemplo (todos tiene width pre-fijado). O no los supe asimilar bien. Pero me parecia una buena opcion, gracias por la correccion
Seba: Estas tecnicas precisamente tratan sobre contenido dinámico. No sabemos el alto de las columnas en ningún caso (y en algunos de ellos, tampoco el ancho).
En definitiva, yo trataría de eliminar esa tabla por cualquier medio posible.
Ah perfecto, ya creo haber entendido, y la ultima opcion es la q mas me sirve, muchas gracias por aclararme las dudas. Muy bueno el material, envio un cordial saludo !!!
Buenisima la 3ª solción, una pena no haberla conocido antes.
Saludos y gracias!
Excelente las explicacion, mis mayores respetos a ustedes. saludos
vi un tutorial que utilizan javascript, pero estaba en ingles y es muy complicado, conocen un metodo explicado a su estilo?
Tengo unas dudas sobre el método 3!
Que sucede si tengo menos contenido que la altura de la resolución y quiero que el contenedor y los divs interiores se estiren el 100%???
Probé con este método pero no funciona del todo bien, en IE6 no funciona.. y en IE7 y FF el footer se queda arriba y no en el top.
Les dejo la url donde puede verlo:
http://www.grmn.ws/DIVS/lalala.html
http://www.grmn.ws/DIVS/lala.css
Gracias.
Esta tecnica sirve tb para tablas... pero hay una descompensacion cuando tienen un footer que esta tambien dentro del "contenedor". En firefox se ve bien, pero en el explorer se estira todo el diseño
Bravo! este tercer truco me ha resultado muy útil! Gracias por el post, un saludo
Hola!
Antetodo enhorabuena por este tipo de tutoriales que ayudan a seguir investigando y no derrumbarse
Dicho esto, ahí lanzo mi pregunta: ¿Hay alguna manera de combinar la opción 3 con la posibilidad de que el alto inicial (sin ningun contenido) sea el 100%? He probrado de todo ya y no sé qué más puedo hacer. Gracias
WenaS! tremenda ayuda esta jajaja justo lo k buscaba, pero tengo un problemita, utilizando el 3er metodo no me funciona bien en opera, los layers krecen hacia abajo infinitamente casi jajaja, en FF si todo perfect!
Hola, muchísimas gracias por las ideas. He aplicado la última y al principio resultó muy bien y probándolo en IE, también era aceptable. Faltaban los bordes inferiores (lo solucioné a modo de chapucilla, poniendo un borde superior al footer, lo que sirvió para crear un borde inferior ficticio para los 3 cuerpos, main y 2 sidebars, lo comento por si es útil para alguien, aunque sea obvio y chapucerillo). Bueno el misterioso problema surge después: IE directamente NO abre mi página. Eliminé el código (los mágenes y padding y overflow) y se resuelve el problema.
¿Sabes por qué pasa esto y si se puede resolver? me pareció muy misterioso. No es cosa de mi navegador, me lo advirtieron varios usuarios de IE.
En fin, me encantó, pero claro, tenía que venir el Maligno con sus cosas...
Gracias Metal, enhorabuena por el diseño, me ha dejado patidifusa
Dejo aquí feliz constancia de que tras varios ajustes en mi plantilla, todo funciona con hermosura.
Muchísimas gracias por tu ayuda y por la idea ;D
Muy bueno! Gracias
Sos mi ídolo! Gracias por ahorrarme horas de trabajo y tedioso javascript =D
La última es sin duda la mejor opción.
Gracias!!
Estuve probando la tecnica 3 con IE 7 y con firefox 3 y no me funciona con ninguno de los 2, con IE7 hace como si no pusiera el "overflow: hidden" y con firefox no hace nada, estare haciendo algo mal
ya solucione el problema anterior poniendo en el estilo del div contenedor width: 100%;height: 100%
:)
Hola, estoy probando el tutorial, y con la 3 técnica tengo un problema.
Los tamaños de las columnas funcionan perfectamente en ie7 i ff3.
Pero cualquier div u spam que le ingreso dentro de la columna, no me toma ninguna propiedad css definida en mi hoja de estilo.
Que puede ser?
slds, marcelo.
Solo tengo algo que decir:
"Es tan sencillo que duele no haberlo encontrado antes."
Muchas gracias MeTaL_oRgY esto es lo que me hacía falta, lástima que donde lo necesitaba uso anchors
Dejando de lado los casos de los anchors, decidí hacerlo para "prácticarlo" y entenderlo; y según pude ver para que funcione todas las columnas deben tener anchos fijos, ni siquiera se puede dejar a una columna con ancho variable (que tome el ancho restante del div contenedor - los otros anchos)
Si es posible reparar esto de alguna forma que no he visto, me alegraría que posteen la respuesta, sino, entonces sería otra desventaja
El ejemplo 4 funciona bien si no hay un pie de pagina, con un pie de pagina
en IE7 funciona pero en FF,Chrome y Opera el pie de pagina desaparece atras de las columnas
De todas formas es muy buena solución
@Eduardo - Yo lo he probado con footer y me va bien. Sólo hay que tener cuidado con las propiedades; pero si es posible.
Lo que no he intentado es usar footers más complejos (como el footer que se mantiene abajo de la ventana del navegador o abajo del contenido, lo que sea más largo)... ya cuando reviva un poco el blog le meto más mano a esto.
Con la ultima técnica me ha ido perfecto, muchas gracias por compartir tu experincia, me ha sido de gran ayuda