Twitter Bootstrap手风琴全高

我有一个手风琴/可折叠的Bootstrap页面。我希望手风琴占据整个页面的高度（减去顶部的导航栏）。Twitter 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/

谢谢！

来源

2012-10-24 Hannes

从我所了解的，在一个页面可以有任何没有。的手风琴可以说4或5.因此，如果扩展第一个手风琴，其下的另外4个手风琴应该在浏览器高度的100％范围内，包括扩展的手风琴，扩展手风琴时不应该出现滚动条？我对吗？ – roxid

-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-28 16:42:37 Calvin

-1

不知道这是你在寻找什么，但你可以做一些类似的顶部导航栏上，粘页脚一些东西，假定高度不会改变

CSS

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

这里的小提琴

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

来源

2014-02-20 22:38:59 morocklo

这个JSFiddle还能工作吗？当我点击Chrome中的项目＃1或项目＃2时似乎没有任何事情发生。 – user1515295

Twitter Bootstrap手风琴全高

回答

相关问题