我有一个 Bootstrap 页面，上面有一个 Accordion /可折叠的页面。我希望 Accordion 占据页面的整个高度(减去顶部的导航栏)。
有没有人知道如何最好地实现这一目标？如果 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>
谢谢!
最佳答案
假设您指的是整个 Accordion ，您有两个可能的解决方案。
首先，如果可以设置父级的固定高度，您可以简单地使用 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());
});
关于html - Twitter Bootstrap Accordion 全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13044986/