Twitter Bootstrap手风琴全高度窗格

Question

我一直在努力用twitter bootstrap accordion来实现这个目标：

通常，使用手风琴（bootstraps collapse plugin）不是必须的。

我想要实现的目标是：

• 使用bootstrap作为基础框架，
• 有固定顶部导航栏，
• 具有无滚动条的全宽/高度内容，
• 有3个单独的，可折叠的内容窗格（总是只有一个正在展开），
• 点击标题部分展开内容窗格（并折叠之前展开的标题），
• 仅在一个展开的内容窗格（图片中的DIV 1 | 2 | 3）中进行滚动，
• 当内容窗格折叠时，隐藏其溢出
• 让每个内容窗格具有可配置的最小高度（对于其“标题”），
• 使其适用于响应式布局。

我真的很想得到一些帮助，因为我觉得我对此感到失望:(

“允许”使用其他jQuery插件（如jQuery UI）。

Answer 1

我能用一些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 2

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 3

任何人都有Bootstrap 3解决方案吗？

编辑（这似乎有用）：https://github.com/twbs/bootstrap/issues/2462

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