ブートストラップnavbarドロップダウンメニューの背景が機能しない

Question

これをできるだけ簡略化するために、基本的にページにブートストラップナビバーを追加しています。タブの1つにドロップダウンメニューがあり、5つのサブオプションから選択できます。私は、バックグラウンドは最初のサブオプションの下にしか表示されていないことがわかりました。 CSSは高さを100％に設定します。これは、CSSを500pxに変更すると、私が望むものです。それは領域を拡大します。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li><a class="active" href="index.html">Home</a></li> 
       <li><a class="li" href="whatido.html">What I Do</a></li> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Travels<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Asia</a></li> 
         <li><a href="#">Europe</a></li> 
         <li><a href="#">Scotland</a></li> 
         <li><a href="#">Other</a></li> 
         <li><a href="#">And Another</a></li> 
        </ul> 
       </li> 
       <li><a class="li" href="upcomingtrips.html">Upcoming Trips</a></li> 
       <li><a class="li"href="aboutme.html">About Me</a></li> 
       <li><a class="li" href="gallery.html">Gallery</a></li> 
       <li><a class="li" href="contactpage.html">Contact</a></li> 
      </ul> 
     </div> 
    </div></nav> 
</nav> 

ドロップダウンのためのCSSは

.dropdown-menu { 
     height:100%; 
} 

結果単純です：私はこの結果を得る

.dropdown-menu { 
     height:300px; 
} 

にCSSを変更する場合が

adjustable size

fixed size 各サブオプションが 'dropdown-menu' ulクラスに含まれていると、100％オプションが領域全体をカバーしない理由を理解するのは難しいですね。

Answer 1

ブートストラップで.dropdown-menuクラスposition: absolute;があります。したがって、パーセンテージの高さはうまくいかない。ドロップダウンクラスからposition: absolute;を削除すると、高さの割合が機能しています。