7

アコーディオン/折りたたみ可能な 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/

ありがとう！

4

2 に答える 2

-1

アコーディオン全体を意味すると仮定すると、2つの解決策が考えられます。

まず、親の固定の高さを設定できる場合は、次の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-28T16:42:37.013 に答える