부트 스트랩이 동일한 높이로 아코디언을 유지

Question

사용자가 다른 축소 패널을 클릭 할 때 부트 스트랩 아코디언을 동일한 높이로 유지하려고합니다. 채널이 onclick하면 컨텐츠가 너무 커지면 아코디언 전체 높이를 얻을 수있는 공간을 만들어야하고 화면 이동 가능한 컨텐츠로 만들어야합니다. 여기에 fiddle!

var header = $('.panel-heading'); 
var test = $(window).height() - (header.length*$('.panel-heading').height()); 
$('.panel-body').height(test); 

Answer 1

나는 당신의 CSS, HTML을 편집 한과 JS .. 나는 JQuery와 함께이 작업을 수행하는 방법을 모르는, 그래서 보통 자바 스크립트 사용했습니다 :

var header = document.getElementsByClassName('panel-heading'); 
var headingheights = header.length * (header[0].offsetHeight + 18); 
var test = $(window).height() - headingheights; 
$('.panel-body').height(test); 

참고 : 모두 Panelbodys는 동일한 패딩을 가져야하므로 필자는 자신의 div에서 -15px (솔루션과 동일한 효과)의 여백을 사용하여 목록을 래핑했습니다.

설명을 위해 몇 가지 덧글을 입력했습니다 ...;)

이 바이올린에서보세요 : https://jsfiddle.net/hhcpuequ/11/

나는 이것이 당신이 찾고있는 무슨 희망)