Han*_*nes 7 html css accordion twitter-bootstrap
我有一个带有手风琴/可折叠的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>
谢谢!
Cal*_*vin -1
假设您指的是整个手风琴，您有两个潜在的解决方案。
首先，如果可以设置父级的固定高度，您可以简单地使用height:100%;
示例标记，如下所示：
HTMLCSS
<div class="page">
<div class="accordion">
content
</div>
</div>
.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/
| 归档时间： |
|
| 查看次数： |
5183 次 |
| 最近记录： |