Проблема высоты HTML Div

Question

У меня есть два элемента div на моей странице, выровненные по вертикали. содержимое одного div фиксировано, но содержание другого div изменяется так, что его высота. я хочу сделать оба div одинаковой высоты. как я могу это сделать ??

Answer 1

Хитрость в том, чтобы использовать свойства CSS display: table, display: table-row и display: table-cell, чтобы контейнеры (в данном случае элементы div) вели себя как ячейки таблицы.

Полное объяснение и демонстрация

также: Столбцы равной высоты с использованием CSS

Answer 2

Ну, есть два пути:

Использование CSS с поддельным фоном

Для этого вам нужно будет сделать изображение вашего фона, содержащее оба столбца, как вы ожидаете увидеть их. Отобразите это на том, что содержит столбцы, и теперь столбцы будут выглядеть одинаково по высоте, даже если это не так.

Вам может понадобиться добавить новый div для переноса фона:

<div class="colwrap">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

<div class="colwrap">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Или используйте jQuery (или другое), чтобы исправить высоту

Это немного более ручное руководство, но если у вас запущены другие JS-скрипты, это не должно быть слишком сложно.

if ($('col:1').height() > $('col:2').height())
    $('col:2').height($('col:1').height());
else
    $('col:1').height($('col:2').height());

или что-то вроде , которое сделает это.