2017-03-06 336 views
0

我有一個關於下面,我抓起從代碼的一個問題:如何獲取瀏覽器的高度

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; 
} 
+2

即絕對有可能與支持視口單元(即那些支持CSS3規格)的瀏覽器。對於視口的高度,你可以用'100vh'(指視口高度的100%)。 – Terry

+0

我同意特里,讓CSS處理樣式。這個不需要JavaScript。 – jmag

+0

甜美,好看又簡單。把它作爲贏得的答案 – Dick

回答

2

按我原來的評論,你可以使用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>

0

是的,你可以通過使用可以在javascript高度:

window.innerHeight現在

當你想將高度分配給特定的班級可以使用:

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

注意

window.innerHeight 

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