Twitter bootstrap手風琴固定尺寸百分比

使用twitter引導我試圖創建一個手風琴，當展開後將在屏幕height上佔用80%。到目前爲止，我還沒有找到一種方法使其與%合作。固定高度正常工作，但沒有進行計算，以弄清楚屏幕高度的80％是多麼毫無意義。Twitter bootstrap手風琴固定尺寸百分比

<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稍作修改。

來源

2012-10-09 Bankzilla

的jsfiddle這裏簡單的jQuery測量窗口的高度

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

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

還要注意在CSS中刪除高度

來源

2013-03-14 04:47:55 red

Twitter bootstrap手風琴固定尺寸百分比

回答

相關問題