使用 Twitter Bootstrap,我正在尝试创建一个手风琴式菜单,在展开时将占据屏幕高度的 80%。到目前为止,我还没有找到一种方法使其与百分比符号
我已经创建了一个fiddle,展示了我本地的内容。 http://jsfiddle.net/bpSjn/1/ 手风琴模型与Twitter提供的示例相同。只有一些CSS方面的小变化。
%
协同工作。使用固定高度是可以的,但是如果不进行计算以确定屏幕高度的 80%,那就毫无意义了。<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle btn-warning btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
RETURNED RESULTS
</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 btn btn-danger" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
WRITE RESPONSE
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
css
#admin-response{
width:60%;
min-width:400px;
margin-left:10%;
height:85%;
float:left;
}
#admin-response .accordion-inner{
width:100%;
background-color:#fff;
height:100%;
box-shadow:2px 2px 12px rgba(0, 0, 0, 0.15);
-moz-box-shadow:2px 2px 12px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:2px 2px 12px rgba(0, 0, 0, 0.15);
}
#admin-response .accordion-body.in.collapse{
min-height:85%;
}
我已经创建了一个fiddle,展示了我本地的内容。 http://jsfiddle.net/bpSjn/1/ 手风琴模型与Twitter提供的示例相同。只有一些CSS方面的小变化。