高度100％，滾動條和無形的內容

Question

我已經得到了與100％的高度一個div一個問題。在那個div裏我有表格記錄，但最後5條記錄不可見，因爲滾動條在到達這些記錄之前停止。

HTML結構的一個例子：

JS fiddle

看起來是因爲當我刪除該分區的最後一個記錄是可見的列表頭引起該問題。任何想法如何解決這個問題？

Answer 1

<div class="main"> 
    <div class="list"> 
     <div class="list-table"> 
      <table> 
       <thead> 
        <tr><td>header</td></tr> 
       </thead> 
       <tbody> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>tesdst</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>test</td></tr> 
       <tr><td>2nd</td></tr> 
       <tr><td>Last</td></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

使用thead代替div創建，這將是最好的做法，因爲你仍然可以使用的按鈕，一切都在THEAD表格單元格。

不管怎麼說：

你需要讓名單表小90％，做工精細。

這裏是jsfiddle

釋：

你父格「名單」有100％的高度，你的「列表標題」具有70像素的高度和你的「名單表「也有100％的高度。在「列表表」 +「列表頭」的70像素高度的100％等於100％以上。所以，你需要或者讓你的「排行榜」做大或者在它的孩子小 - 的rember你總是需要分割父到孩子的的高度，使其適合。這是可以理解的嗎？

Answer 2

你有你的.main類使用position:fixed？嘗試不說

Answer 3

.list-table { 
    height:80vh; 
    overflow: auto; 
}