CSS: Как получить два DIV рядом с автоматической высотой, до высоты их контейнера?

Question

Я разрабатываю веб-сайт для клиента и пытаюсь настроить два параллельных DIV, чтобы они соответствовали 100% их контейнера. Я сделал бок о бок, но я не могу сделать правильный DIV такой же высоты, как левый.

Вы можете посмотреть проблему здесь: http://www.campusmomlaundry.com/

DIVs «вызовы» и «преимущества» должны быть расположены рядом и иметь одинаковую высоту, без указания высоты вручную. Как я могу это сделать?

Answer 1

Если бы это был я. Я бы решил эту проблему с помощью JavaScript. Используя jquery вы можете сделать ...

$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
    $('#rightColumn').height($('#leftColumn').height());
}
else
{
    $('#leftColumn').height($('#rightColumn').height());
}
});

Это должно сделать это. Если вам нравятся люди, с которыми я работаю, и вам не нравится использовать Javascript для решения проблем CSS. Тогда вам, вероятно, не повезло В большинстве случаев гораздо быстрее просто использовать JQuery, чем использовать «правильный путь» с помощью css. Возможно, вы могли бы провести весь день, пытаясь заставить его работать с различными комбинациями стилей.

Answer 2

Ваша проблема в том, что внешний div автоматически изменяет размер по внутреннему контенту, который автоматически измеряет его по содержимому.

У вас есть несколько вариантов:

• Используйте фоновое решение, упомянутое в ответе @ R0MANARMY, чтобы создать визуальную иллюзию двух одинаково высоких столбцов.
• Установите высоту двух внутренних элементов div равным одному и тому же точному числу (используя px или em)
• Установите высоту внешнего div на точное число.
• Поиграйте с атрибутом display и попробуйте несколько различных значений, таких как ячейка таблицы и так далее. Имейте в виду, что этот не будет работать в некоторых старых браузерах. (Не только IE, но и некоторые старые версии Firefox и Chrome)
• Использовать простую таблицу с одной строкой и двумя столбцами.

Я понимаю, что последний является самым спорным из всех. Тем не менее, это возможное решение вашей проблемы, и нет никаких причин, почему вы не должны хотя бы оценивать.

([стонет], пожалуйста, пожалуйста, никто не упоминает слова «семантический HTML»! В нашей вселенной такого нет.)

Answer 3

В A List существует статья, посвященная решению аналогичной проблемы, вы, вероятно, могли бы использовать ее в качестве справки: Faux Columns .

Answer 4

Возможно, количество пунктов пули в левом DIV?

Answer 5

Вы пробовали: height: auto; или height: 100%;?