Question

我有一个带有手风琴/可折叠的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/

谢谢！

Answer 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/

Answer 2

不确定这是否正是您正在寻找的，但您可以执行与顶部导航栏的粘性页脚类似的操作，假设高度不会更改

<强> CSS

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

这是小提琴

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

Twitter Bootstrap手风琴全高度

2 个答案: