Напишите простой JS, чтобы получить максимальную вычисленную высоту и назначить ее всем элементам div. Вам не нужен JQuery.

у меня есть две панели начальной загрузки в ряду класса.
И я пытаюсь сделать высоту обеих панелей равными друг другу, даже если какой-либо объем данных помещен внутри<div class="panel-body"></div> любой панели.

Ниже мой HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default col">
                <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

                </div>
                <div class="panel-footer">Panel Footer</div>
            </div>

        </div>
    </div><br><br>

Любая помощь будет высоко оценена. Спасибо

 sol08 нояб. 2017 г., 16:55
Это может помочь ->getbootstrap.com.vn/examples/equal-height-columns
 Woodrow Barlow08 нояб. 2017 г., 17:37
следует ли учитывать высоту, даже когда блоки отображаются вертикально (как это происходит, когда размер экрана уменьшается по горизонтали)?

Ответы на вопрос(3)

Решение Вопроса

matchHeight.js в этом сценарии.

Вы можете сопоставить любой компонент, который вы хотите.

Я подобралpanel-body поскольку это то, что увеличивается, когда вы добавляете контент к нему. Вотручка также.

НОТА: По мере уменьшения размера это свойство не будет применяться. Хотя, по моему мнению, прокрутка будет ненужной, если свойство все еще существует. Как пользователь должен будет прокрутить все пустые места.

$(function() {
  $('.panel-body').matchHeight();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<div class="row-eq-height">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default col sec">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>

  </div>
</div><br><br>

 Dhaval Jardosh08 нояб. 2017 г., 17:40
совершенно верно.
 CarrotCrop08 нояб. 2017 г., 17:46
@Dhaval Jardosh: Спасибо, что сработали, как и ожидалось. Огромное спасибо.
 Woodrow Barlow08 нояб. 2017 г., 17:39
обратите внимание, что новая высота не учитывается, когда блоки отображаются вертикально (как это происходит, когда размер экрана уменьшается по горизонтали). в большинстве сценариев я бы считал это предполагаемым поведением, но, возможно, стоит упомянуть.

чтобы получить максимальную вычисленную высоту и назначить ее всем элементам div. Вам не нужен JQuery.

var panels = document.getElementsByClassName('panel-body');

var maxHeight = Array.prototype.map.call(panels, function(panel) {
    return parseInt(getComputedStyle(panel).height, 10);
  })
  .reduce(function(a, b) {
    return Math.max(a, b);
  });

for (var i = panels.length; i-- > 0;) {
  panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default col">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

row-eq-height кrow класс. Это сделает все панели в ряду равными самой высокой.

Смотрите пример:https://jsfiddle.net/m7jyh1ex/

 Dhaval Jardosh08 нояб. 2017 г., 17:38
Это тоже хорошее решение, теперь я знаю что-то новое. Спасибо!

Ваш ответ на вопрос