7

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

2 回答 2

-1

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

CSS

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

这是小提琴

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

于 2014-02-20T22:38:59.410 回答
-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/

于 2013-01-28T16:42:37.013 回答