Сделать плавающие 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; } 

Вы можете попробовать вместо использования 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; } 

Ответ 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/

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

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

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

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

Пример – http://jsfiddle.net/LMGsv/

HTML

  
text

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 }