Question

我们有两个div，其中一个div只包含内容，另一个div包含bootstrap内容崩溃。所以这里发生的事情是我们点击可折叠的元素它会打开，它的父母的高度会自动增加。我们有很多可折叠的div。

现在我们如何设置div 1的高度与div 2的高度相同？如果div 2高度增加则div 1高度也需要增加。

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>

  <div class="col-sm-6 div1">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

  <div class='col-sm-6 div2'>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
            </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
      </div>
    </div>
  </div>
</div>

请帮忙

Answer 1

$(".div1").css({
  'height': ($(".div2").height() + 'px')
});

$('#accordion').on('hidden.bs.collapse', function() {
  // do something…
  $(".div1").css({
    'height': ($(".div2").height() + 'px')
  });
})

使用Bootstrap方法的更好方法

检查以下代码： http://codepen.io/anon/pen/rWLQNg

Answer 2

我使用这样的东西来匹配具有相同类的元素的高度。

function matchHeight(elem){
        var elemH = 0;
        $(elem).each(function(){
            elem.css('height', 'auto');
            if($(this).outerHeight() > elemH){
                elemH = $(this).outerHeight();
            }
        });
        $(elem).height(elemH + 'px');
    };

所以在任何情况下你都可以这样做：

$(document).ready(function(){ 
    matchHeight('.className');
});

如何根据其他div的高度更改一个div的最小高度

2 个答案: