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

291

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

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

<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>
  • 0
    Как вы положили их "бок о бок"? Используя float ?
  • 0
    Вы хотите, чтобы, если один из них становится больше, чем другой, оставался бы того же самого размера высоты?
Показать ещё 1 комментарий
Теги:
html-table
flexbox

19 ответов

388
Лучший ответ

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>

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

Поделиться
  • 13
    flexbox работал как шарм. Если вы разрабатываете адаптивный дизайн и хотите, чтобы ваш второй div уменьшился на меньших экранах, вам нужно установить .row для display: block; в вашем медиа-запросе.
  • 4
    @NickZulu Я считаю, что в этом случае вы должны установить flex-direction: column : jsfiddle.net/sdsgW/1
Показать ещё 13 комментариев
138

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

В основном то, что вы делаете, делает div div/columns очень высокими, добавляя 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, поэтому я собираюсь пометить его как правильный. Спасибо!
  • 0
    Похоже, что это не работает в старых браузерах IE (да, к сожалению, я все еще должен поддерживать IE6). Есть ли способ сделать это совместимым?
Показать ещё 5 комментариев
51

Это область, в которой у 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.

Поделиться
  • 5
    Это решение не доступно для тех, кому нужна поддержка IE6 / IE7, но я считаю, что оно самое чистое.
  • 1
    Этот ответ является идеальным! просто небольшое напоминание: может случиться так, что некоторым клиентам требуется «таблица» вместо «таблица-строка»
Показать ещё 4 комментария
32

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

с помощью jQuery вы можете сделать это в супер простой однострочной script.

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

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

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

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

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

Поделиться
  • 0
    Я думаю, что использование JavaScript - очень хороший метод. Проблема в том, что он разваливается, если отключен. Я думаю, что я буду использовать это в любом случае и создаст лучшее непредвиденное обстоятельство, которое я могу; -) Спасибо!
  • 9
    Это означает, что высота columnOne всегда больше, чем columnTwo.
Показать ещё 2 комментария
12

Я удивлен, что никто не упомянул (очень старую, но надежную) технику 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>
Поделиться
  • 1
    Если в правом столбце больше строк, чем в левом, содержимое переполняется.
  • 0
    @David. Вы можете переключаться влево и вправо.
11

Вы можете использовать Jquery Equal Heights Plugin для выполнения, эти плагины делают все 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/

Поделиться
8

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

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

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

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

Поделиться
3

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

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

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

.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>
Поделиться
2

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

Fiddle

Независимо от того, что 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;
}
Поделиться
1

Этот вопрос задавали 6 лет назад, но он по-прежнему заслуживает простого ответа с макетом flexbox в настоящее время.

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

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

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

Поделиться
  • 1
    Принятый ответ уже использует flexbox.
  • 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. что не упоминается в принятом ответе ... Я только что закончил здесь. Может быть, я должен был прокомментировать принятый ответ?
Показать ещё 3 комментария
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;            
}
Поделиться
1

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

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

Это плагин 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] );

}

};

Поделиться
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="/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>
Поделиться
0

У меня была такая же проблема, поэтому я создал эту небольшую функцию, используя 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');
});

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

Поделиться
  • 0
    ... поскольку в настоящее время jquery удаляется из большинства веб-приложений. Времена меняются...
-1

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

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

Поделиться
-1 
    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);

    });
Поделиться
  • 1
    Пожалуйста, предоставьте любой комментарий к вашему ответу.
-2 
<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>

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

Поделиться
  • 0
    ОП хотел, чтобы у div всегда была одинаковая высота.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню