高度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; 
}