ブートストラップグリッドの高さを画面の解像度に換算する

Question

私は、xmlテクノロジ（プロセッサ、XQueryなどのより優れた形式のXForms）に基づいて、Webアプリケーションにブートストラップを使用しています。私はeXist-dbでそれを作成しました。

私は応答性の高いユーザーインターフェイスを作成したいので、ブートストラップグリッドの高さを各画面に合わせたいので、画面の高さの80％を塗りたいと思っています。しかし、それは実際には機能しません。ここに私のコードはあります：

<div class="col-md-3"> 
    <div class="orderListRepeat"> 
     <h3>Details</h3> 
     <div style="height: 80%; width: 100%; overflow-y: scroll; overflow-x: scroll;"> 
      <table class="table table-striped"> 
       <tr> 
        <td> 
         <b>Name:</b> 
        </td> 
        <td> 
         <xf:output ref="//object[index('object-repeat')]/name"/> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <b>Number:</b> 
        </td> 
        <td> 
         <xf:output ref="//object[index('object-repeat')]/number"/> 
        </td> 
       </tr> 
       <tr> 
        ... 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

パーセンテージはwidthパラメータで動作します。高さパラメータの80％をたとえば500pxはすべて正常に動作しますが、パーセンテージはここでは機能しません。理由を理解できません。すべての画面解像度で、コンテンツ内の表は画面の高さと重なっていても完全に表示されます。

すべてのヒントに感謝します。

Answer 1

使用vh単位（画面の垂直方向の高さの1つのVH = 1％）

ので、代わりのheight: 80%;、height: 80vh;