溢出留下很大的空白

Question

我在CSS溢出時遇到了問題，因爲它現在正在將大量空白區域留在表格的下方。

問題：

這麼說的窗口是500像素高，我的tbody的高度設置爲自動溢出設置爲100像素。 tbody中的html是1000px高。

爲什麼瀏覽器會滾動到1000px而不是100px（500px）？

請參閱fiddle

這裏是我的HTML：

<table class="height"> 
    <tbody class="height"> 
     <tr> 
      <td> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      <p>a</p> 
      </td> 
     </tr> 
    </tbody> 
</table> 

，這裏是我的CSS：

tbody { 
    height: 100px; 
    overflow: auto; 
} 


thead > tr, tbody{ 
    display:block;} 

簡單的方式來看待它。

我只應該有一個滾動條。不是這個額外的一個。

Answer 1

你能括在一個div容器，並做同樣溢出？除非有特殊需要，否則我不確定是否會將所有這些內容應用於Tbody。

http://jsfiddle.net/bS4pL/

.fixedHeight { 
    height: 300px; 
    overflow-y: auto; 
} 


<div class="fixedHeight"> 
    <table> 
     <tbody class="height"> 
      <tr> 
       <td> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
        <p>a</p> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>