は、ブラウザの高さを取得する方法を

Question

私はからつかんだ、それ以下のコードについて質問があります：私は低レベルのプログラマの多くの午前

http://jsfiddle.net/SAFX/Mq52k/16/

をので、私はちょうど十分なHTML/CSSを知っています取得する。私は150pxの固定値ではなく、ブラウザのウィンドウの高さに基づいてテーブルの高さを設定する方法を解明しようとしています。私の限られたCSSの知識で、私はこれがcssだけでは不可能かもしれないと仮定していますか？ Javaスクリプトのようなものは必要でしょうか？

HTML：

<div class="panel panel-default"> 
    <table class="table table-condensed" > 
     <thead> 
      <tr> 
       <th>Col1</th> 
       <th>Col2</th> 
       <th>Col3</th> 
      </tr> 
     </thead> 
    </table> 

<div class="div-table-content"> 
    <table class="table table-condensed"> 
     <tbody> 
      <tr> 
       <td>data</td> 
       <td>more data</td> 
       <td>hello world, nice to see you again, and what a beautiful fixed header 
        column you have</td> 
      </tr> 
      <tr> 
       <td >data</td> 
       <td >more data</td> 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
        column you have</td> 
      </tr> 
      <tr> 
       <td >data</td> 
       <td >more data</td> 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
        column you have</td> 
      </tr> 
      <tr> 
       <td >data</td> 
       <td >more data</td> 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
        column you have</td> 
      </tr> 
      <tr> 
       <td >data</td> 
       <td >more data</td> 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
        column you have</td> 
      </tr> 
      <tr> 
       <td >data</td> 
       <td >more data</td> 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
        column you have</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

CSS：

table { 
    table-layout:fixed; 
} 

.div-table-content { 
    height:150px; 
    overflow-y:auto; 
} 

Answer 1

私の元のコメントはviewport units in browsers that support CSS3 specs for this new unit of measurementです。サポートは現在のところ広く普及しており、ブラウザの84％がこれをサポートしています。 vmax単位を使用していないため、部分的なサポートは問題ではありません。

したがって、ビューポートの高さの100％を占めるテーブルの場合は、100vhを使用します。これはビューポートの高さの100％を意味します。定義により、各単位は測定軸の1％を表します。

ユーザビリティについては、最小の高さも宣言することを検討して、ユーザビューポートが短すぎるとテーブルがちょっと高さが崩れないようにすることをおすすめします。

以下のコードスニペットでは、最低高さ250pxと合わせて、.div-table-contentのビューポートの高さを指定しました。ビューポートのサイズを変更して実際の動作を確認することができます。私はイラストの目的のために要素に黄色の背景色を追加しました。ビューポート単位（CSS3仕様をサポートする、すなわち、それらを）サポートするブラウザで間違いなく可能である

table { 
 
    table-layout: fixed; 
 
} 
 

 
.div-table-content { 
 
    background: yellow; 
 
    height: 100vh; 
 
    min-height: 250px; 
 
    overflow-y: auto; 
 
}

<div class="panel panel-default"> 
 
    <table class="table table-condensed" > 
 
     <thead> 
 
      <tr> 
 
       <th>Col1</th> 
 
       <th>Col2</th> 
 
       <th>Col3</th> 
 
      </tr> 
 
     </thead> 
 
    </table> 
 

 
<div class="div-table-content"> 
 
    <table class="table table-condensed"> 
 
     <tbody> 
 
      <tr> 
 
       <td>data</td> 
 
       <td>more data</td> 
 
       <td>hello world, nice to see you again, and what a beautiful fixed header 
 
        column you have</td> 
 
      </tr> 
 
      <tr> 
 
       <td >data</td> 
 
       <td >more data</td> 
 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
 
        column you have</td> 
 
      </tr> 
 
      <tr> 
 
       <td >data</td> 
 
       <td >more data</td> 
 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
 
        column you have</td> 
 
      </tr> 
 
      <tr> 
 
       <td >data</td> 
 
       <td >more data</td> 
 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
 
        column you have</td> 
 
      </tr> 
 
      <tr> 
 
       <td >data</td> 
 
       <td >more data</td> 
 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
 
        column you have</td> 
 
      </tr> 
 
      <tr> 
 
       <td >data</td> 
 
       <td >more data</td> 
 
       <td >hello world, nice to see you again, and what a beautiful fixed header 
 
        column you have</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Answer 2

はい、あなたが使ってJavaScriptでの高さを取得することができます：

window.innerHeightを

今、あなたがしたいときあなたが特定のクラスに身を任せる使用することができます：

document.getElementsByCalssName('div-table-content')[0].style.height = window.innerHeight+"px"; 

を

window.innerHeight 

NOTEは、あなたがしたい場合は、あなたがそれで変更を適用することができ整数でウィンドウの高さを示します。

Answer 3

CSSにはheight:100vhを使用できます。ここがあなたですupdated fidle