html - trick - Hacer divs flotantes de la misma altura.

same height css trick

Question

Tengo 2 divs de lado a lado. No sé la altura de ellos por adelantado, cambió de acuerdo con el contenido. ¿Hay alguna manera de asegurarse de que siempre tengan la misma altura, incluso cuando uno de ellos se estira, solo con CSS?

Hice un violín para mostrar. Quiero que las divs rojas y azules sean de la misma altura ...

http://jsfiddle.net/7RVh4/

este es el css

#wrapper {
width: 300px;
}
#left {
    width:50px;
    background: blue;
    float:left;
    height: 100%;  /* sadly, this doesn''t work... */
}
#right {
    width:250px;
    background: red;
    float:left;
}

Answer 1

Hay una solución mucho más simple que quiero señalar. Usando el padding-bottom: 500em grande padding-bottom: 500em y el margin-bottom:-500em negativo margin-bottom:-500em de la misma cantidad en las columnas, mientras que la envoltura simplemente se overflow:hidden para cortar las columnas al tamaño correcto.

Encontrado aquí: HTML / CSS: haciendo dos divs flotantes de la misma altura

Answer 2

La respuesta de Antony funciona bien, pero necesitas todos los divs para tener el mismo padre y para tener un contenedor, tengo una solución que usa javascript pero funciona con cualquier tipo de elemento, solo necesitan tener el mismo selector.

  function setEqualHeight(selector, triggerContinusly) {

    var elements = $(selector)
    elements.css("height", "auto")
    var max = Number.NEGATIVE_INFINITY;

    $.each(elements, function(index, item) {
        if ($(item).height() > max) {
            max = $(item).height()
        }
    })

    $(selector).css("height", max + "px")

    if (!!triggerContinusly) {
        $(document).on("input", selector, function() {
            setEqualHeight(selector, false)
        })

       $(window).resize(function() {
            setEqualHeight(selector, false)
       })
    }


}

    setEqualHeight(".sameh", true) 

http://jsfiddle.net/83WbS/2/

Answer 3

Puedes hacer esto sin usar tablas, usando http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks truco de CSS.

Ejemplo: http://jsfiddle.net/LMGsv/

HTML

   <div id="wrapper">
            <div id="columns">
                <div id="left">text</div>
                <div id="right">text<br/>another line<br /></div>
            </div>        
    </div>

CSS

#wrapper {
    float:left;
    width: 300px;
}
#columns {
    float:left;
    width:300px;
    background:blue;
}
#left {
    float:left;
    width:50px;
    background: blue;
}
#right {
    width:250px;
    background: red;
    float:left
}

Answer 4

Puedes probar en lugar de usar float, usa display: table-cell . Sin embargo, es posible que algunos navegadores antiguos no entiendan esta regla. Vea abajo:

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}

Answer 5

Recomendaría leer este artículo que explica cómo hacer lo que está tratando de hacer. Me gustaría poner un violín que muestra, pero es bastante extenso y puro css. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks