Div在動態表格加載不重新定位頁腳

Question

我正在嘗試在可滾動的div周圍有一個固定的頁眉和頁腳。

如果我將表Div設置爲絕對值（儘管我獲得了滾動條），當數據加載到表格行時，頁腳不會重新定位。如果我讓它呈現默認值，那麼頁腳會正確移動到頁面的底部，但表格的div只是擴展到它需要的大小，我必須使用瀏覽器滾動。

<header/> 
<div id="ListDiv"> 
    <table id="adapter-table" class="grid"> 
     <thead> 
      <tr> 
       <th>Manufacturer</th> 
       <th>Name</th> 
       <th></th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: Adapters"> 
      <tr> 
       <td data-bind="text: Manufacturer"></td> 
       <td data-bind="text: Name"></td> 
       <td><a href="#" data-bind="click: $parent.selectItem">Edit</a></td> 
       <td><a href="#" data-bind="click: $parent.deleteItem">Delete</a></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<footer/> 

如何讓表格滾動？我不在乎thead是否從屏幕上滾動下來，找出它並不複雜，腳下的編輯表格使它不必要。

我想這是我的CSS：

body { 
    height:100%; 
} 

header, footer { 
    background: #ccc; 
    height:20%; 
} 

#ListDiv{ 
    height: 60%; 
    width: 100%; 
    overflow-y:auto; 
} 

.grid { 
    border: 1px solid black; 
    border-spacing: 0; 
    width: 95%; 
} 

我已經設置在http://jsfiddle.net/gregmason/UChLF/10/

Answer 1

改變了身體的高度，以一個固定的高度，例如

body { 
    height:400px; 
} 

這樣，相對div的其餘部分計算爲父元素（body）的相對值。