100% alto, finalmente para todos

11/oct/2007 47

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

Comentarios

  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. » Íconos para mejor usabilidad | CSSLab [#]

    […] a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar íconos a los links que sean […]

  17. empdesign » Blog Archive » Mantener el alto maximo de la caja [#]

    […] < !–[if lt IE 7]> /* style for IE 6 + IE5.5 + IE5.0 */ .gainlayout { height: 0; } < ![endif]–> < !–[if IE 7]> .gainlayout { zoom: 1;} < ![endif]–> http://www.csslab.cl/2007/10/11/100-alto-finalmente-para-todos/ […]

  18. Columnas con altura 100% respecto a su bloque contenedor | HijadeSastre [#]

    […] Encuentro en csslab.cl esta interesante técnica que nos sacará de muchos apuros, para conseguir que una columna tenga la misma altura que su bloque contenedor. […]

  19. 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

  20. 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.

  21. 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

  22. Hacks CSS « ddsign [#]

    […] lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. 100% alto, finalmente para todos Una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del […]

  23. Columnas con altura 100% respecto a su bloque contenedor [#]

    […] Encuentro en csslab.cl esta interesante técnica que nos sacará de muchos apuros, para conseguir que una columna tenga la misma altura que su bloque contenedor. […]

  24. 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.

  25. 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.

  26. jose [#]

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

  27. 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.

  28. Féliz [#]

    Una consulta, se ve diferente en chrome, alguien tiene una respuesta?

  29. Orlando Gonzales [#]

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

  30. 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?

  31. Osky [#]

    El estilo del link es este

  32. Osky [#]

    ()

  33. Osky [#]

    con ” heading10 “

  34. Osky [#]

    Siempre que coloco el estilo de link desaparece 8- )

    Tipo así ..

    h1 id=”heading10″ h1 <–

  35. Pollo [#]

    Muchas gracias. es justo lo que necesitaba

  36. 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…

  37. 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.

  38. 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.

  39. 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.

  40. Jorge Epuñan [#]

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

    saludos.

  41. 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.

  42. 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.

  43. Eduardo [#]

    Solo una palabra EXCELENTE!!!!!!!!!!

  44. Silver [#]

    funcionó excelente, gracias por compartir.

  45. da [#]

    MUCHAS GRACIAS por el tutorial! estuve todo el día buscando conseguir esto y nadie daba la solución correcta hasta que encontré tu página! me re sirvió! infinitas gracias!

  46. Markos [#]

    Hola , hay un problema con esto , si un link lleva a un id dentro de cualquier columna por el overflow se corta el contenido 😐

  47. Rene Sarayasi [#]

    Excelente!!!
    Yo trabajo con boostrap, con el sistema de grids y con class. Todo lo que hice es agregar Id a cada parrilla y luego en css hice lo que está descrito en esta página y funciona la magia.

Responder a GHN ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab