100% alto, finalmente para todos

11/Oct/2007 12543

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. SharylSet [#]

    casino games slots games

  2. BotoLyncIntet [#]

    play casino vegas slots online

  3. 롤대리 [#]

    It’s truly very complicated in this full of activity life to listen news on Television, so I simply use internet for that reason, and get the
    hottest news.

  4. Loredophertarry [#]

    gold fish casino slots online casino games

  5. Normantam [#]

    online casinos free slots games

  6. DiedraEcope [#]

    casino slots slots for real money

  7. CarlosBub [#]

    real money casino casino game

  8. PatrickMam [#]

    real money casino play slots online

  9. Skinconsehick [#]

    slots free real money casino

  10. Hazellelax [#]

    real money casino slots for real money

  11. DavidMesse [#]

    gold fish casino slots free casino games

  12. AshleyBop [#]

    no deposit casino casino blackjack

  13. DiedraEcope [#]

    play casino slots casino slots

  14. Defattaithaccug [#]

    free casino vegas slots online

  15. GustavoVet [#]

    best essay writing services
    online essay typer

  16. BotoLyncIntet [#]

    vegas slots online casino game

  17. WhitneyHak [#]

    casino online casino blackjack

  18. ivermectin 6 mg [#]

    Global Low-down Far this outcome
    https://ivermectinstrom.com ivermectin 6 mg
    https://ivermectstromect.com ivermectin 3 mg
    https://ivermectstromect.com ivermectin over the counter
    https://stromectolivermect.com ivermectin tablets
    https://ivermectinsts.com ivermectin for humans

  19. Canlı bahis [#]

    Canlı Bahis Siteleri 2021 Giriş Adresleri, Bedava Bonus Veren Mobil Ödemeli Siteler Nelerdir? Kaçak İddaa Oyna – Güvenilir Kaçak Bahis – İllegal Bahis.

  20. amoxicillin clavulanate 875 125mg uses [#]

    When someone writes an paragraph he/she keeps the plan of a user in his/her mind that
    how a user can know it. So that’s why this piece of writing is great.
    Thanks! http://antiibioticsland.com/Amoxil.htm

  21. Samuelnet [#]

    free casino games online play slots online

  22. Anthonymus [#]

    online gambling real money casino

  23. flagyl powder [#]

    Pretty portion of content. I just stumbled upon your weblog
    and in accession capital to say that I get in fact loved account your weblog posts.
    Anyway I will be subscribing for your augment
    or even I achievement you get right of entry
    to consistently fast. http://antiibioticsland.com/Flagyl_ER.htm

  24. SidLok [#]

    free slots games free slots games

  25. JamesDet [#]

    online casinos casino play

  26. AshleyBop [#]

    online casino cashman casino slots

  27. BotoLyncIntet [#]

    slots games free online slots

  28. Loredophertarry [#]

    best online casino free casino games online

  29. CarlosBub [#]

    casino games online slot games

  30. DavidMesse [#]

    casino online casino games

  31. DiedraEcope [#]

    slot games free online slots

  32. LouiseNorse [#]

    casino online slots slots online

  33. ivermectin for sale [#]

    Global Low-down Fro this product
    https://stromectolivermect.com ivermectin 12 mg
    https://stromectolivermect.com ivermectin over the counter
    https://ivermectstromect.com ivermectin for humans
    https://ivermectinsts.com ivermectin 6 mg
    https://ivermectinst.com stromectol

  34. Hazellelax [#]

    online casino games slots games

  35. Skinconsehick [#]

    cashman casino slots online casino real money

  36. PatrickMam [#]

    play casino slots online slots

  37. ivermectin for sale [#]

    Global Message Fro this product
    https://stromectolivermect.com ivermectin tablets
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinsts.com stromectol ivermectin
    https://ivermectinst.com ivermectin tablets
    https://ivermectstromect.com ivermectin 6 mg

  38. DiedraEcope [#]

    real casino slots free casino slot games

  39. Defattaithaccug [#]

    casino online slots online slots

  40. Cami Halısı Konya [#]

    Cami Halısı ve Cami Halıları Firmamız 1989’dan günümüze kadar kalite ve müşteri memnuniyetini esas alarak Cami, Yurt, Kur’an Kursu, Mescit Halısı ve duvardan duvara halı ile hizmet vermenin gururunu … Cami halısı firmamız kendi üretimi olan akrilik ve yün cami halıları ile cami halısı firmaları arasında önemli bir yere sahiptir.

  41. Williamsalty [#]

    no deposit casino real casino slots

  42. WhitneyHak [#]

    play casino slots online gambling

  43. BotoLyncIntet [#]

    casino games play slots online

CSSLab