Как изменить минимальную высоту одного div по высоте другого div

У нас есть два div, в которых один div содержит только содержимое, а другой - с загрузкой бутстрапов с содержимым. Итак, вот что произойдет, если мы нажмем collapisable elemnt , он откроется, и высота его родителя автоматически увеличится. У нас много разборчивых div.Как изменить минимальную высоту одного div по высоте другого div

Теперь, как мы можем установить высоту div 1, то же самое, что и с div 2 height?. Если div 2 height увеличивается, то div 1 height также необходимо увеличить.

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

Пожалуйста, помогите

источник

2016-11-15 Anonymous

Пожалуйста, присылайте скрипку. – Aslam

Вы хотите, чтобы все divs имели одинаковый рост? или же минимальная высота? – Aslam

Непонятно, что вы просите. Из вашего описания (желая, чтобы все divs были одинаковой высоты), это похоже на то, что вся точка сбрасываемого плагина избыточна –

$(".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

источник

2016-11-15 11:12:36 Aslam

Вы правы. Эта вещь, которую я знаю. Но здесь, когда вы нажимаете на Collapsible Group 1, она будет расширяться. SO div 2 увеличение высоты. Но div1 высота не увеличивается. –

проверить отредактированный ответ сейчас :) – Aslam

Пожалуйста, проверьте пример кода, который вы даете. В том же случае, когда пользователь нажимает collapisable group div2, высота увеличивается, но высота code1 не увеличивается. –

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

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

источник

2016-11-15 11:29:03

Как изменить минимальную высоту одного div по высоте другого div

ответ

Смежные вопросы