Twitter的引導手風琴全高度窗格

Question

我一直在困擾自己與twitter bootstrap accordion來實現這一目標：

通常，使用手風琴（引導程序崩潰插件）不是必須的。

我想實現是：

• 使用引導爲基本框架，
• 有固定的頂部導航欄中，
• 有全寬/高含量W/O滾動條，
• 有3個單獨的，可摺疊的內容窗格（總是隻有一個被展開），
• 有點擊頭ER部分擴大內容窗格（和摺疊之前展開的一個），
• 已經滾動僅在所述一個擴展內容窗格（DIV 1 | 2 |在PIC 3）發生，
• 當內容窗格都崩潰了，有自己的溢出隱藏，
• 各有內容窗格有其配置的最小高度（它的「頭」），
• 有這個正常工作的響應佈局。

更喜歡得到一些這方面的幫助，因爲我覺得我失去我的腦海裏這:(

使用附加的jQuery插件（如jQuery UI）是「允許」。

Answer 1

HTML：

<div class="ui-accordion" id="accordion">   
    <h4 class="ui-accordion-header">DIV1</h4> 
    <div class="ui-accordion-content" id="accordion-div1"></div> 
    <h4 class="ui-accordion-header">DIV2</h4> 
    <div class="ui-accordion-content" id="accordion-div2"></div> 
    <h4 class="ui-accordion-header">DIV3</h4> 
    <div class="ui-accordion-content" id="accordion-div3"></div> 
</div> 

CSS： 沒什麼特別的

JS：

$("#accordion").accordion({ 
    heightStyle : "fill" 
}); 

Answer 2

我能夠與一些JS來實現這一點：

var tabsHeight = $('.accordion-heading').outerHeight() * $('.accordion-heading').length; 
var height = $('#your_accordion_container').innerHeight() - tabsHeight; 

$('.accordion-inner').height(height - 1); 

我還沒有想通了，爲什麼我需要做的- 1尚未但是沒有它的.accordion-inner太大

請確保將其封裝在一個函數中，並在每次瀏覽器窗口調整大小時調用它。另外請確保您的.accordion-inner沒有任何垂直填充或從設定的高度移除該填充。

Answer 3

任何人對此有一個自舉3解決方案？

編輯（這似乎工作）：https://github.com/twbs/bootstrap/issues/2462

$('#accordion').collapse().height('auto');