100% alto, finalmente para todos

11/Oct/2007 2472

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. cheap cialis canada online [#]

    cheap cialis canada online https://tadalafili.com/

  2. Gdolzo [#]

    mexican pill for ed – erectile dysfunction erectile dysfunction pills which ed pill works the best

  3. tadalafil 10 mg tablet [#]

    Every weekend i used to pay a visit this site, as i wish for enjoyment,
    as this this web site conations in fact good funny data too. http://cleckleyfloors.com/cialis

  4. cost of 5mg cialis [#]

    cost of 5mg cialis https://tadalafili.com/

  5. vidalista.com coupon [#]

    When some one searches for his required thing, so he/she wishes to be available
    that in detail, so that thing is maintained over here. http://www.deinformedvoters.org/vidalista-online

  6. hydroxychloroquine coupon cvs [#]

    Hello, i think that i saw you visited my weblog thus i came
    to “return the favor”.I’m attempting to find things to improve my website!I suppose its
    ok to use a few of your ideas!! https://hydroxychloroquinel.lm360.us/

  7. buy tadalafil [#]

    buy tadalafil https://cialis.webbfenix.com/

  8. cheap doxycycline [#]

    Hello there! I know this is somewhat off topic but I was wondering
    which blog platform are you using for this website?
    I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at alternatives for
    another platform. I would be fantastic if you could point me in the direction of a good platform. http://antiibioticsland.com/Doxycycline.htm

Deja tu Comentario

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

CSSLab