如何獲取瀏覽器的高度

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％。

對於可用性問題，您可能還需要考慮聲明最小高度，以便在用戶視口過短時，表格不會摺疊到一個可笑的小高度。

在下面的代碼片段中，我給出了您的.div-table-content一個完整的視區高度，最小高度爲250px。您可以調整視口大小以查看它的實際效果。爲了說明目的，我爲該元素添加了一個黃色背景色。

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 

讓你在整數窗口的高度，如果你願意，你可以適用於它的變化。

Answer 3

你可以在你CSS使用height:100vh。這裏是你的updated fidle