Twitter bootstrap 手风琴固定大小百分比答案

【问题标题】：Twitter bootstrap accordion fixed sizes in percentagesTwitter bootstrap 手风琴固定大小百分比
【发布时间】：2012-09-29 06:26:27
【问题描述】：

使用 twitter 引导程序，我正在尝试创建一个手风琴，当它展开时将占据屏幕上的 80% height。到目前为止，我还没有找到使它与% 合作的方法。固定高度可以正常工作，但如果不计算屏幕高度的 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%;
}

我创建了一个小提琴，显示我在本地拥有的东西

http://jsfiddle.net/bpSjn/1/

手风琴模型与 twitter 给出的示例相同。对 css 进行了一些小改动。

【问题讨论】：

标签： css twitter-bootstrap height accordion

【解决方案1】：

JSFiddle 这里用简单的 jQuery 来测量窗口高度

var viewportHeight = $(window).height() * 0.8;
$('.accordion').css('max-height', viewportHeight);
$('.accordion').css('min-height', viewportHeight);

http://jsfiddle.net/bpSjn/31/

还要注意 CSS 中删除的高度

【讨论】：