gpt4 book ai didi

html - Twitter Bootstrap Accordion 全高

转载 作者:太空狗 更新时间:2023-10-29 14:38:50 25 4
gpt4 key购买 nike

我有一个 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>

http://jsfiddle.net/Ye2xq/2/

谢谢!

最佳答案

假设您指的是整个 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());

});

示例:http://jsfiddle.net/Ye2xq/11/

关于html - Twitter Bootstrap Accordion 全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13044986/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com