Сделать плавающие divs одинаковой высоты

У меня есть 2 divs бок о бок. Я не знаю их высоту заранее, она изменилась в соответствии с содержанием. Есть ли способ убедиться, что они всегда будут одинаковой высоты, даже когда один из них растягивается, только с CSS?

Я сделал скрипку, чтобы показать. Я хочу, чтобы красные и синие divs были одинаковой высоты...

http://jsfiddle.net/7RVh4/

это 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;
}

Ответы

Ответ 1

Вы можете попробовать вместо использования float использовать display: table-cell. Возможно, некоторые старые браузеры не понимают этого правила. См. Ниже:

#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;
}

Ответ 2

Ответ Antony работает нормально, но вам нужно, чтобы все divs имели один и тот же родительский элемент и имели оболочку, у меня есть решение, использующее javascript, но работающее с любым элементом, просто нужно иметь тот же селектор.

  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/

Ответ 3

Я бы рекомендовал прочитать эту статью, в которой объясняется, как делать то, что вы пытаетесь сделать. Я бы поставил скрипт, который показывает, но его довольно обширный и чистый css. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Ответ 4

Существует гораздо более простое решение, на которое я хочу обратить внимание. Используя большие padding-bottom: 500em и отрицательные margin-bottom:-500em той же суммы в столбцах, в то время как обертке просто overflow:hidden, чтобы вырезать столбцы в нужный размер.

Найдено здесь: HTML/CSS: создание двух плавающих div с одинаковой высотой

Ответ 5

Вы можете сделать это, не используя таблицы, используя этот трюк CSS.

Пример - 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
}