ブートストラップの固定高さDIV

Question

私のアプリケーションでは、データベースレコードのブートスタープグリッドを表示する必要があります。レコード数はフルページスクロールせずに表示するのに十分なので、私はテーブルをスクロール前のスクロール可能なdivでラップし、テーブルをスクロールする機能を私に与えました。しかし、DIVのサイズは常にブラウザウィンドウの半分です。私はほぼすべてのスタックオーバーフローポストや提案を試みただけで、私のために働いていない。私はまた、これをJavaスクリプトのサポートで修正しようとしましたが、失敗しました。

これは私がPHPコードの結果をテーブルの上に移入私のHTMLコード

<div class="col-md-9"> 
<div class="pre-scrollable"> 
<table class="table table-bordered table-hover header-fixed" id="sometable"> 
        <thead> 
        <tr> 
        <th>EMP_No</th> 
        <th>Name</th> 
        <th>Designation</th> 
        <th>Department</th> 
        <th>Type</th> 
        <th>#Days</th> 
        <th>Start Date</th> 
        <th>End Date</th> 
        <th>Half day</th> 
        <th>Status</th> 
        </tr> 
       </thead> 
       <tbody> 
       </tbody> 
       <?php //php code for print the table 
       ?> 
</div>  
</div> 

です。

<style> 
table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 
td, th { 
    border: 1px solid #dddddd; 
    text-align: center; 
    padding: 1px; 
} 
thead th { 
    text-align: center; 
    background-color: #3498db; 
} 
tr:nth-child(even) { 
    background-color: #dddddd; 
} 
</style> 

This is the result web page

Answer 1

ブートストラップのCSSファイルの.pre-scrollable divにmax-heightプロパティが設定されています。

.pre-scrollable { 
    max-height: 340px; 
    overflow-y: scroll; 
} 

これは問題の原因になっている可能性があります。

Answer 2

Twitter bootstrap - Fixed layout with scrollable sidebar使用されているCSSは、上の例のよう...助けるあるwindows.below私は固定値またはブラウザの完全な値にこのDIVの高さを設定する方法のアイデアを持っていませんリンクされたページでは、divテーブルの高さを設定する必要があることが示されます。

<style type="text/css"> 
     body, html { 
      height: 100%; 
      overflow: hidden; 
     } 

     .navbar-inner { 
      height: 40px; 
     } 

     .scrollable { 
      height: 100%; 
      overflow: auto; 
     } 

     .max-height { 
      height: 100%; 
     } 

     .no-overflow { 
      overflow: hidden; 
     } 

     .pad40-top { 
      padding-top: 40px; 
     } 
</style> 

Answer 3

簡潔にするため、cssビューポートの寸法を使用することができます。このようなもの：

ここで、 "75vh"は目に見える高さの75％です。