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

443

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

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

<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>
Развернуть фрагмент

html css html-table flexbox NibblyPig
источник
Вы хотите, чтобы, если один из них становится больше, чем другой, оставался бы того же самого размера высоты?
Вай Вонг
Пример, который не является решением, но находится в редактируемой среде, можно найти здесь: jsfiddle.net/PCJUQ
MvanGeest
Используйте javascript: stackoverflow.com/questions/3275850/…
C. Заяц

Ответы:

593

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>
Развернуть фрагмент

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

Павло
источник
17
flexbox работал как шарм. Если вы разрабатываете адаптивный дизайн и хотите, чтобы ваш второй div уменьшился на меньших экранах, вам нужно установить .row для display: block; в вашем медиа-запросе.
Ник Зулу
7
@NickZulu Я считаю, что в этом случае вы должны установить flex-direction: column: jsfiddle.net/sdsgW/1
Павло
1
@ Экштейн не требуется для обоих решений. Смотрите демоверсии.
Павло
3
это не работало для меня, пока я не добавил рост: 100%; в детские колонны
Джейкоб Раккуя
1
Можно ли заставить одного конкретного ребенка определять высоту другого? Так что, если содержимое другого дочернего div меняется, оно не может изменить высоту этого конкретного div
Нарек Малхасян
149

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

По сути, вы делаете оба 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>
Развернуть фрагмент

лямбда
источник
1
Объяснение One True Layout было немного плохим, но после проверки первой ссылки я реализовал его в одном из примеров, которые он использовал. Однако это действительно плохо, потому что вы должны использовать изображение для представления нижней границы столбцов, и это сомнительно для поддержки кросс-браузер. Однако это работает и не зависит от javascript, поэтому я собираюсь пометить его как правильный. Спасибо!
NibblyPig
Похоже, что это не работает в старых браузерах IE (да, к сожалению, я все еще должен поддерживать IE6). Есть ли способ сделать это совместимым?
strongriley
1
@strongriley Checkout Блог Эда Элиота: ejeliot.com/blog/61 Это должно работать в IE6. Может быть проблема в другом месте?
mqchen
1
Это разбивается, если окно слишком узкое, а элементы div расположены друг под другом.
WhyNotHugo
1
Как вы определяете заполнение ячейки, которое вы действительно хотите представить в ячейке таблицы, например padding: 7px 10px, если padding-bottomсвойство установлено на 100%? (PS overflow:hiddenмне тоже потребовался row)
user1063287
55

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

<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.

Paul D. Waite
источник
5
Это решение не доступно для тех, кому нужна поддержка IE6 / IE7, но я считаю, что оно самое чистое.
twsaef
2
Этот ответ является идеальным! просто маленькое напоминание: может случиться так, что некоторым клиентам требуется «таблица» вместо «таблица-строка»
tiborka
@ user2025810: ау, спасибо. Вы знаете, какие клиенты требуют tableвместо table-row?
Пол Д. Уэйт
@ user2025810: yikes, не могу сказать, что я когда-либо проверял это :) Хорошо, хотя, ура. (Учитывая его направленность на PDF, я уверен, что он поддерживает некоторые функции CSS 2.1, связанные с печатью, которые не очень хорошо реализованы в браузерах.)
Пол Д. Уэйт,
7
С этим решением - забудьте об использовании процента widthдля ваших display: tableэлементов div, если только вы не добавите родительский элемент, который испортит все.
Alex G
42

Использование jQuery

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

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

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

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

Использование CSS

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

Дерек Адэйр
источник
Я думаю, что использование JavaScript - очень хороший метод. Проблема в том, что он разваливается, если отключен. Я думаю, что я буду использовать это в любом случае и создаст лучшее непредвиденное обстоятельство, которое я могу; -) Спасибо!
Nicorellius
13
Это означает, что высота columnOne всегда больше, чем columnTwo.
Себастьян Ричер
1
Вы должны сравнить высоту столбцов перед применением высоты для них. Я думаю, что js - лучший способ решения этой проблемы, почти во всех браузерах включена поддержка js, в противном случае они должны выйти с вашего сайта и многих других сайтов.
SalmanShariati
6
Это также будет работать только при первой загрузке страницы. Если размер окна затем изменяется, в результате чего размеры
div изменяются,
16

Я удивлен, что никто не упомянул (очень старый, но надежный) метод 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>
geofflee
источник
1
Если в правом столбце больше строк, чем в левом, содержимое переполняется.
Дэвид
11

Вы можете использовать плагин 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/

Starx
источник
8

Вы могли бы использовать искусственные столбцы .

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

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

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

Арве Систад
источник
7

Просто заметил эту тему во время поиска этого самого ответа. Я только что сделал небольшую функцию 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>
Майк Уэллс
источник
1
Я использовал externalHeight, чтобы включить отступы и границы. Это самое чистое решение, я думаю.
Себастьян Ричер
Идеальное решение, которое я искал. Другие решения хороши для случая, когда в строке есть несколько столбцов, но этот подход лучше для сложного HTML-контента. Небольшое добавление: при изменении размера документа на отзывчивой странице высота содержимого не изменяется из-за фиксированной. Итак, я добавил $ ('. Inner'). Css ({height: "initial"}); перед «каждой функцией», чтобы установить высоту по умолчанию.
Bafsar
5

CSS сетка

Современный способ сделать это (который также позволяет избежать объявления <div class="row"></div>-обертки вокруг каждых двух элементов) - использовать CSS-сетку. Это также дает вам возможность легко контролировать промежутки между строками / столбцами вашего элемента.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>
Развернуть фрагмент

connexo
источник
4

Этот вопрос задавался 6 лет назад, но все же стоит дать простой ответ с помощью макета flexbox .

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

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

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

Hegwin
источник
1
@TylerH Но спросил, отредактировал свой вопрос и добавил, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.который не упоминается в принятом ответе ... Я только что закончил здесь. Может быть, я должен был прокомментировать принятый ответ?
Hegwin
1
это не упомянуто явно, потому что это уже покрыто простым объявлением CSS. Откройте фрагмент ответа в полноэкранном режиме и измените размер окна браузера, чтобы увидеть; они остаются одинакового размера друг с другом.
TylerH
1
Даже если принятый ответ использует flexbox, у него другой подход. align-items: stretch - это то, что поставило меня на путь решения моей проблемы в очень конкретной ситуации.
BenoitLussier
Разве align-items: stretch;Flex не по умолчанию?
Мадав
3

Использование CSS Flexbox и минимальная высота работали для меня

введите описание изображения здесь

Скажем, у вас есть контейнер с двумя элементами div, и вы хотите, чтобы эти два элемента div имели одинаковую высоту.

Вы должны установить « display: flex » для контейнера, а также « align-items: stretch »

Затем просто дайте ребенку divs минимальную высоту 100%

Смотрите код ниже

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>
Развернуть фрагмент

RealMJDev
источник
2

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

скрипка

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

Оба divдолжны быть непосредственными потомками контейнера и должны указывать их ширину в нем.

Соответствующий 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;
}
Hashbrown
источник
2

Мне нравится использовать псевдоэлементы для достижения этой цели. Вы можете использовать его в качестве фона содержимого и позволить им заполнить пространство.

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

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>
Развернуть фрагмент

Адриан Менендез
источник
1

Fiddle

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}
drjorgepolanco
источник
1

Я испробовал почти все упомянутые выше методы, но решение flexbox не будет работать правильно с Safari, а методы компоновки сетки не будут работать корректно со старыми версиями IE.

Это решение подходит для всех экранов и совместимо с различными браузерами:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

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

Jodyshop
источник
0

Вы можете использовать JQuery для достижения этой цели легко.

CSS

.left, .right {border:1px solid #cccccc;}

JQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

Вам нужно будет включить JQuery

pixeltocode
источник
1
Это не будет работать, если оба <div>имеют динамический контент. Причина, по которой я говорю, заключается в том, <div class="right">что если у вас будет больше контента, то возникает другая проблема
Сурья
0

Я знаю, что это было давно, но я все равно разделяю свое решение. Это трюк JQuery.

--- HTML 

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>
Рой Винсент
источник
-1

Это плагин jQuery, который устанавливает одинаковую высоту для всех элементов в одной строке (путем проверки элемента offset.top). Поэтому, если ваш массив jQuery содержит элементы из более чем одной строки (разные offset.top), каждая строка будет иметь отдельную высоту на основе элемента с максимальной высотой в этой строке.

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

Дежан Кёдич
источник
-2 
    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });
tcao
источник
1
Пожалуйста, предоставьте любой комментарий к вашему ответу.
sgnsajgon
-2

У меня возникла та же проблема, поэтому я создал эту маленькую функцию, используя jquery, так как в настоящее время jquery является частью каждого веб-приложения.

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

Вы можете вызвать эту функцию на странице готового события

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

Я надеюсь, что это работает для вас.

Мастер Программист
источник
-3

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

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

tushar747
источник
-4 
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

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

Вай вонг
источник
ОП хотел, чтобы у div всегда была одинаковая высота.
Саймон Форсберг