推特手风琴手风琴全高度窗格

Question

我一直在努力用twitter引导手风琴来实现这个目标：

​

一般来说，使用手风琴(bootstraps崩溃插件)不是必须的。

我想要实现的是：

• 使用引导作为基本框架，
• 有固定顶部的肚脐，
• 有完整的宽度/高度内容w/o滚动条，
• 有三个单独的、可折叠的内容窗格(总是只有一个正在展开)，
• 单击标头部分展开内容窗格(并折叠先前展开的内容窗格)，
• 只有在一个展开的内容窗格中才有滚动(pic中的DIV 1\2\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：(无特别之处)

联署材料：

$("#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没有任何垂直填充，或者从设置的高度移除该填充。