Twitter Bootstrap手風琴全高

我有一個手風琴/可摺疊的Bootstrap頁面。我希望手風琴佔據整個頁面的高度（減去頂部的導航欄）。Twitter 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>

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

謝謝！

來源

2012-10-24 Hannes

從我所瞭解的，在一個頁面可以有任何沒有。的手風琴可以說4或5.因此，如果擴展第一個手風琴，其下的另外4個手風琴應該在瀏覽器高度的100％範圍內，包括擴展的手風琴，擴展手風琴時不應該出現滾動條？我對嗎？ – roxid

-1

假設你指的是整個手風琴，你有兩個可能的解決方案。

首先，如果有可能設置父的固定高度，你可以簡單地使用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/

來源

2013-01-28 16:42:37 Calvin

-1

不知道這是你在尋找什麼，但你可以做一些類似的頂部導航欄上，粘頁腳一些東西，假定高度不會改變

CSS

.navbar {background-color:#999;} 
.accordion {background-color:yellow; top:18px; bottom:0; position:absolute;}

這裏的小提琴

http://jsfiddle.net/Ye2xq/31/

來源

2014-02-20 22:38:59 morocklo

這個JSFiddle還能工作嗎？當我點擊Chrome中的項目＃1或項目＃2時似乎沒有任何事情發生。 – user1515295

Twitter Bootstrap手風琴全高

回答

相關問題