100% alto, finalmente para todos

Segunda entrega causa directa del videocast 1. Esta vez, una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Con esto, se puede lograr que el fondo de una o ambas columnas crezcan de acuerdo a la mayor. Este problema de diseño tenía variadas soluciones anteriormente: que el contenedor tuviera el fondo a modo de una imagen, o a través de Javascript también se podían lograr altos de 100%.

Ejemplo columnas 100% alto

Bueno, espero ahora sepan de qué escribo. Esta vez nuevamente es una elegante técnica que involucra overflow del contenedor y padding y margin negativo en las columnas. Me gustaría hacer una pausa en estas dos importantes propiedades, sólo para dejar claro lo que involucra.

  • Padding: margen interior.
  • Margin: margen exterior.

Para más claridad aún, nuevamente una imagen de ejemplo.

Ejemplo columnas 100% alto

Safari Firefox Internet Explorer 6 Internet Explorer 7 Opera

Como pueden leer en el muy muy útil artículo sobre el modelo de caja (si no lo han leído, háganlo ya que es muy muy útil), el padding sí modifica el ancho de nuestra caja, no así el margin. Otro detalle my importante, y que ahora nos concierne, es que el margin acepta números negativos (y que suele tener problemas de interpretación en IE6, principalmente cuando son links los involucrados), no así padding que sólo permite cantidades positivas.

Bueno, al grano. Primero, a las columnas (2 o más) deben decirles que tengan un padding-bottom de 30.000 (bien exagerado, aunque el máximo que se permite es de 32768px pero con 30000 basta). Con eso, nuestro scroll vertical se va a marear de tan grande que va a quedar. Este padding-bottom empujará nuestras columnas (y sus estilos de fondo, color o imagen) hasta no más poder, pero luego les damos un margin-bottom negativo con la misma cantidad. Con esto, nuestra caja vuelve donde estaba al comienzo, pero nuestros fondos siguen con el scroll vertical eterno. Finalmente, la caja contenedora debe esconder todo el exceso y por ende ese scroll, por lo que le damos un overflow: hidden y ya (o sea, todo lo que sobre, escóndelo). Bastante lógico.

div#container {
     overflow: hidden;
}
div#izq, div#der {
     float: left;
     padding-bottom: 30000px;
     margin-bottom: -30000px;
}

Un cuidado que deben tener es que si están flotando las cajas, su contenedor colapsará. Para esto, .clearfix será la solución ideal.

Ver ejemplo final

  1. pollaki

    muy buen tutorial, felicitaciones :) , me viene barbaro!
    SALUDOS!!
  2. HiDAl

    genial, se te agradece demasiado. Me haz salvado en este, dias probando cosas y nada lograba. Bueno, se te agradece, y kizas despues me pase por aca invitando a ver la nueva pagina que debo empezar a montar (en flash eso si)… saludos!

    =]+[=
  3. xmax

    Gracias. Muchas gracias. Muchísimas gracias. Demasiadas Gracias. Toneladas de gracias enteras. Esto me ha facilitado el que usaba que coincistía en bordes y valores negativos, ahora uso éste, veanlo aquí.
  4. fearlex

    MUYYYYYYYYY pero que MUYYYYYYYY buenooooo, de veras, que con esto, se arreglan una pila de problemas, gracias por esto, por eso siempre estoy pendiente a CSSLAB, algo que si me preocupa, no tiene ningun efecto secundario ??

    Por ejemplo al aplicarle padding-top ?? o cuando se use un position: absolute ???
  5. Olga

    Hola,

    yo probé esta técnica hace un par de días (metalize se os adelantó), y con todos los navegadores iba genial. ¿Con todos? Bueno no, con IE6 se metía en un proceso de renderización tal, que cerraba la página (ya sabes, el famoso “ha generado errores y tal”). Me pasó en 3 ordenadores distintos y siempre con el IE6.
  6. Ard

    esto no anda che, media pila en IE se ve bien en FF TRONCHA
  7. gustavo

    hola buen tutorial pero he visto que a algunos no le funcionaron bien en el IE6, tambien he visto otras soluciones, pero no las entiendo muy bien conoces alguna que sea simple como esta.
  8. CSSLab Admin

    gustavo, funiocna perfecto en todos los tests de browsers q hice. este metodo da q hablar.
  9. grmn

    Hola.
    Yo hice la prueba y funciona explendido, pero no en IE 6!!
    Al hacer el overflow en dicho explorador obviamente lo corta y no funciona.
    que hacemos??

    Saludos.
  10. jon

    hola, gracias por el tutorial, me funciona bien pero el border-bottom de las kajas no se me ve, me podrias decir si sabes por ke es? gracias, saludos
  11. CSSLab Admin

    jon, no se ve porq con este metodo tu borde inferior bajo 30000px…. trata de poner ese borde al contenedor, al q tiene el overflow: hiddenn; suerte.
  12. jon

    hola, gracias, me imaginaba ke era por eso, la kosa ke el kontenedor de fuera koge las dos kolumnas ke tengo y solo kiero ke aparezca en uno. sino le pondre dimension fija. de rtodas formas gracias y saludos
  13. Novatillo

    Muy bueno, lo he probado y funciona perfectamente en firefox 1.5 y explorer 6.0 y de paso me ha solucionado precisamente ese problema con los altos.

    Gracias por tuto
  14. GHN

    A mi no me funciona en IE 6. Se colapsa el div (quizás porque estoy usando una tabla como template)

    Ese es otro asunto… estoy utilizando una tabla de 3 filas para maquetar una especie de template: El header, el footer y la parte central. El header y footer se encuentran en archivos apartes, y son llamados en los demás ficheros. Ambos tienen las etiquetas y , por lo que no es necesario declarar una celda en cada fichero. Mi problema radica en que, no importa si no tengo mucha información, me gustaría que la celda abarcara el 100% de la pantalla, y cuando hay overflow, que no se separen las celdas (como me ocurre en IE). Intenté de varias maneras pero no doy con la solución. Probé este método con el contenedor de la celda central y tampoco me sirvió. Alguna sugerencia?
  15. GHN

    Por cierto, las cajas internas son flotantes y le agregué el clearfix. Aún así no tengo solución a mi problema.

    AUXILIO! T______________T
  16. Juan Pablo Ruiz

    Excelente, lei este post hace mucho rato, hoy lo necesite, lo busque, lo encontre lo probe y funciono a la perfeccion. Solo tengo una pregunta si quiero que el contenedor principal tenga un padding de 10px en cada lado, es decir que las cajas internas no queden exactamente al borde del contenedor.
    Si me puedes ayudar con eso te lo agradesco
  17. CSSLab Admin

    Juan Pablo: se me ocurren 2 cosas (no probadas): { padding-bottom: 30000px; margin-bottom: -29990px; } (ahi le estas dejando 10px de padding-bottom) o lo otro, mas recomendable, dale esse padding a otra caja entre tu contenedor y el contenido (txt, imagenes) tal como lo recomiendo en este articulo. Salu2.
  18. Juan Pablo

    Gracias por la respuesta, creo que la primera sugerencia ya la habia probado y no funciono. Voy a ver si la segunda me funciona!
    Gracias
  19. Jose

    Podrias leerte eso:
    http://www.forosdelweb.com/f53/consulta-sobre-100-alto-finalmente-para-todos-csslab-609553/

    Es una pregunta, muy especifica, sobre algo que ya te preguntan aqui, pero mas apliado, ya que al parecer, denotra un efecto secundario de estructuracion de contenido, el cual no he he podido resolver.
  20. Jorge Epuñan

    Jose, no le respondo en ese sitio ya q no me interesa registrarme, mejor le explico aqui. Tal como ya le habia respondido, lo mejor es q ese border-bottom de 10px se lo agregue al contenedor q tiene overflow: hidden. Claro, mediante CSS ese border será para ambas columnas y no sólo para la que necesiita que tenga (la gris). Entonces, la solución es q lo haga con una imagen GIF de 10px de alto negra y con el ancho q tenga la columna. Lo posiciona asi:

    background: url(‘franja_inferior.gif’) left bottom no-repeat;

    y ya. mejor no complicarse con mas codigo q luego podria estropearse entre todos los browsers, simplifica tus problemas para cosas mas dificiles.

    suerte.
  21. jose

    No lo habia leido, al parecer era un problema mas de creatividad, gracias y saludos.
  22. jose

    bueno, al fin de cuentas es lo mismo. Puesto sigue quedando a 30000 pixeles en el fondo, aunque sea un border-bottom o una imagen, parece ser que en este metodo, eso no se puede hacer.
  23. Féliz

    Una consulta, se ve diferente en chrome, alguien tiene una respuesta?
  24. Orlando Gonzales

    Gracias Amigo por tu aporte, realmente me sirve de mucho, felicitaciones…!
  25. Osky

    El .. overflow: hidden;

    padding-bottom: 30000px;
    margin-bottom: -30000px;

    Me quiebra los links de estilo .. cuando vajo para un link dentro de la misma página y quiero subir de nuevo.. la página se corta al medio .. ? que puede ser eso? Como solucionar?
  26. Osky

    El estilo del link es este
  27. Osky

    ()
  28. Osky

    con ” heading10 “
  29. Osky

    Siempre que coloco el estilo de link desaparece 8- )

    Tipo así ..

    h1 id=”heading10″ h1 <–
  30. Pollo

    Muchas gracias. es justo lo que necesitaba
  31. alex

    pues me funciona perfecto… pero en opera no le hace caso al “overflow” del contenedor… pero si floto este mismo contenedor… ya funciona…, pero… nose si en otras resoluciones falla, por k la visualizo al 70% y me deja de nuevo el scroll enorme… a que se debe?…

    PD:Estoy usando el clearfix, y sin el tambien pasa…
  32. Christian

    En Chrome me esconde el div que tiene overflow y por ende no puedo ver la informacion. Es normal eso? A alguien le paso lo mismo? Gracias por la ayuda.
  33. Jorge Epuñan

    Christian: quizas tu div con overflow colapsa debido a algun elemento flotando; revisa eso, colocale algun metodo de clearfix o manda el link si necesitas mas ayuda.

    Exito.
  34. Miguel

    Funciona muy bien, pero no puedo poner anclas, desaparece el resto de IDs de la página, he bajado tu código y te pasa también.
  35. Jorge Epuñan

    Asi es Miguel, he tenido el mismo problema con esta tecnica y lamentablemente es su unico defecto.

    saludos.
  36. Miguel

    Pues lo acabo de arreglar: he creado una clase en la que especifico posición absoluta, luego aplico esa clase a cada ancla.
    Espero que no tenga ningún “efecto secundario”.
    Saludos.
  37. Miguel

    Si, si que tiene problemas, en IE 6 y 7 no funcionan las anclas, y en Safari y Chrome siguen eliminándose los IDs.
    En FF y Ópera va bien.
    Sigo con ello.
  1. [...] a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de ...
    » Íconos para mejor usabilidad | CSSLab
  2. [...] < !–[if lt IE 7]> /* style for IE 6 + IE5.5 + IE5.0 */ .gainlayout { height: 0; ...
    empdesign » Blog Archive » Mantener el alto maximo de la caja
  3. [...] Encuentro en csslab.cl esta interesante técnica que nos sacará de muchos apuros, para conseguir que una columna tenga la ...
    Columnas con altura 100% respecto a su bloque contenedor | HijadeSastre
  4. [...] lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. ...
    Hacks CSS « ddsign
  5. [...] Encuentro en csslab.cl esta interesante técnica que nos sacará de muchos apuros, para conseguir que una columna tenga la ...
    Columnas con altura 100% respecto a su bloque contenedor