Twitter Bootstrap 手风琴全高答案

【问题标题】：Twitter Bootstrap accordion full heightTwitter Bootstrap 手风琴全高
【发布时间】：2012-10-14 05:50:36
【问题描述】：

我有一个带有手风琴/可折叠的 Bootstrap 页面。我希望手风琴占据页面的整个高度（减去顶部的导航栏）。

有没有人对如何最好地实现这一目标提出建议？如果不能选择 CSS 解决方案，我愿意使用 JavaScript。

这是标记：

  <body>
    <div class="navbar navbar-inverse">
      <div class="navbar-inner">
          Navigation
      </div>
    </div>

    <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
        <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseThree" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

http://jsfiddle.net/Ye2xq/2/

谢谢！

【问题讨论】：

据我了解，在一个页面中可以有任何没有。手风琴的让我们说 4 或 5。因此，如果您展开第一个手风琴，那么它下面的其他 4 个手风琴应该在浏览器高度的 100% 范围内，包括展开的手风琴，并且在展开手风琴时不应该出现滚动条？我说的对吗？

标签： html css twitter-bootstrap accordion

【解决方案1】：

假设您指的是整个手风琴，您有两种可能的解决方案。

首先，如果可以设置父级的固定高度，您可以简单地使用height:100%; 示例标记类似于：

HTML <div class="page"> <div class="accordion"> content </div> </div>
CSS .page { height: 800px; //or whatever } .accordion { height: 100%; }

或者，因为这通常是不可能的。您可以使用 javascript/jQuery。这样的事情会起作用：

jQuery(document).ready(function($) {
    //cache the accordion object to variable
    var accordion = $('div.accordion');

    //set accordion object equal to target divs height 
    accordion.height($('div.page').height());

});

示例：http://jsfiddle.net/Ye2xq/11/

【讨论】：

【解决方案2】：

不确定这是否正是您要查找的内容，但您可以执行类似于顶部导航栏的粘性页脚的操作，假设高度不会改变

CSS

.navbar {background-color:#999;}
.accordion {background-color:yellow; top:18px; bottom:0; position:absolute;}

这是小提琴

http://jsfiddle.net/Ye2xq/31/

【讨论】：

这个 JSFiddle 还能用吗？当我在 Chrome 中单击第 1 项或第 2 项时，似乎没有任何反应。