Как сделать два соседних div-элемента одинаковой высоты?

Question

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

Вот пример кода:

<div style="overflow: hidden">
    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Какое-то содержимое!<br />
        Какое-то содержимое!<br />
        Какое-то содержимое!<br />
        Какое-то содержимое!<br />
        Какое-то содержимое!<br />
    </div>

    <div style="
        border: 1px solid #cccccc;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    ">
        Какое-то содержимое!
    </div>
</div>

Как мне добиться желаемого поведения высоты для этих div-ов?

Answer 1

Это область, где у CSS никогда не было действительно хороших решений. Вам остается использовать теги <table> (или имитировать их с помощью значений CSS display:table*), так как именно там реализована функция «содержать кучу элементов одинаковой высоты».

Вот пример кода:

<div style="display: table-row;">
    <div style="border:1px solid #cccccc; display: table-cell;">
        Какой-то контент!<br/>
        Какой-то контент!<br/>
        Какой-то контент!<br/>
        Какой-то контент!<br/>
        Какой-то контент!<br/>
    </div>

    <div style="border:1px solid #cccccc; display: table-cell;">
        Какой-то контент!
    </div>
</div>

Этот метод работает во всех версиях Firefox, Chrome и Safari, в Opera с версии 8 и в IE с версии 8.

Answer 2

Я удивлён, что никто не упомянул о (очень старой, но надёжной) технике Absolute Columns:
http://24ways.org/2008/absolute-columns/

На мой взгляд, этот метод значительно превосходит как Faux Columns, так и технику One True Layout.

Общая идея заключается в том, что элемент с position: absolute; будет позиционироваться относительно ближайшего родительского элемента с position: relative;. Затем мы можем растянуть колонку, чтобы она заполнила 100% высоты, задав одновременно top: 0px; и bottom: 0px; (или любое другое значение в пикселях/процентах, которое вам действительно нужно). Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        position: relative;
      }

      #left-column {
        width: 50%;
        background-color: pink;
      }

      #right-column {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

Эта техника позволяет создать выразительное и адаптивное макетирование, что делает её очень полезной для проектов.

Answer 3

Вы можете использовать плагин Equal Heights от jQuery для достижения этого эффекта. Этот плагин делает все элементы <div> одинаковой высоты, так что если один из них увеличивается, остальные тоже будут расти.

Вот пример реализации:

Использование: $(object).equalHeights([minHeight], [maxHeight]);

Пример 1: $(".cols").equalHeights(); 
           Устанавливает высоту всех колонок одинаковой.

Пример 2: $(".cols").equalHeights(400); 
           Устанавливает высоту всех колонок не менее 400 пикселей.

Пример 3: $(".cols").equalHeights(100,300); 
           Колонки будут иметь высоту не менее 100 и не более 300 пикселей. Элементы с слишком большим контентом получат полосы прокрутки.

Вот ссылка на плагин: Equal Heights jQuery Plugin

Answer 4

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

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Содержимое здесь
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        Больше содержимого здесь
    </div>
</div>

В приведённом коде мы вычисляем максимальную высоту элементов с классом .inner и затем устанавливаем эту высоту для обоих блоков. Это позволяет добиться одинаковой высоты для элементов в разных контейнерах.

Answer 5

Этот вопрос был задан 6 лет назад, но до сих пор актуален, и стоит дать простой ответ с использованием flexbox в наши дни.

Просто добавьте следующий CSS к родительскому <div>, и всё заработает.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

Первые две строки указывают, что элемент будет отображаться как flexbox. Свойство flex-direction: row сообщает браузерам, что его дочерние элементы будут располагаться в строку. А align-items: stretch обеспечит, что все дочерние элементы растянутся до той же высоты, если один из них станет выше.

Как сделать два соседних div-элемента одинаковой высоты?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных