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

Question

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

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

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

Answer 1

Flexbox

С flexbox это одно объявление:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Для старых браузеров могут потребоваться префиксы, см. Поддержка браузера .

Answer 2

Это распространенная проблема, с которой многие сталкивались, но, к счастью, некоторые умные умы, такие как Эд Элиот в своем блоге , разместили свои решения в Интернете.

По сути, вы делаете как div / столбцы очень высотой, добавляя padding-bottom: 100%, так и "обманывая браузер", думая, что они не такие высокие, используя margin-bottom: -100%. Это лучше объяснил Эд Элиот в своем блоге, который также включает в себя множество примеров.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

Answer 3

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

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

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

Answer 4

Используя Javascript

, используя jQuery, вы можете сделать это в очень простом однострочном скрипте.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

Используя CSS

Это немного интереснее,Техника называется Искусственные колонны .Более или менее вы фактически не устанавливаете фактическую высоту равной, но вы настраиваете некоторые графические элементы, чтобы они выглядели одинаковой высоты.

Answer 5

Я удивлен, что никто не упомянул (очень старый, но надежный) метод Absolute Columns: http://24ways.org/2008/absolute-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 6

Вы можете использовать плагин Jquery Equal Heights, чтобы выполнить, этот плагин делает все div точно такой же высоты, как и другие.Если один из них растет, а другой тоже будет расти.

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

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Вот ссылка

http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 7

Вы можете использовать Faux Columns .

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

Хотя работает только с полями фиксированной ширины.

Хорошо протестировано и правильно работает в каждом браузере.

Answer 8

Просто заметил эту тему во время поиска этого самого ответа.Я только что сделал небольшую функцию 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">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

Answer 9

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

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

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

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

Answer 10

Если вы не возражаете против того, чтобы один из div s был мастером и определял высоту для обоих div s, есть следующее:

Fiddle

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

Оба div s должны быть мгновеннымидочерние элементы контейнера, и должны указывать их ширину в нем.

Соответствующий CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}