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

У меня есть два 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>

Ответ 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>

Ответ 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>

Ответ 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.

Ответ 4

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

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

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

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

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

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

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

Ответ 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>

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 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>

Ответ 9

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

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

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

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

Ответ 10

Если вы не возражаете, чтобы один из 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;
}

Ответ 11

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

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

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

Ответ 12

CSS сетка

Современный способ сделать это (который также избегает необходимости объявлять <div class="row"></div> -wrapper вокруг каждых двух элементов) заключается в использовании 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>

Ответ 13

Я испробовал почти все упомянутые выше методы, но решение 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 упомянутый выше.

Ответ 14

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

Ответ 15

Я знаю, что это было долгое время, но я все равно разделяю свое решение. Это трюк 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>

Ответ 16

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;            
}

Ответ 17

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

}

};

Ответ 18

    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);

    });

Ответ 19

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

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

Ответ 20

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

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

Ответ 21

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

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