如何將桌子高度設置爲垂直滾動容器的高度？

Question

http://jsfiddle.net/awu1tzoj/

有沒有一個技巧我錯過了這個？我希望桌子也被限制在.panel-body的高度。

html, body { 
    height: 100%; 
} 
.panel-body { 
    height: 100px; 
} 
table { 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
} 

Answer 1

您需要添加overflow: auto到.panel-body類，像這樣：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.panel-body { 
 
    height: 100px; 
 
    overflow: auto; 
 
} 
 
table { 
 
    width: 100%; 
 
}

<div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <th>Month</th> 
 
      <th>Savings</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>January</td> 
 
      <td>$100</td> 
 
     </tr> 
 
     <tr> 
 
      <td>February</td> 
 
      <td>$80</td> 
 
     </tr> 
 
     <tr> 
 
      <td>February</td> 
 
      <td>$80</td> 
 
     </tr> 
 
     <tr> 
 
      <td>February</td> 
 
      <td>$80</td> 
 
     </tr> 
 
     <tr> 
 
      <td>February</td> 
 
      <td>$80</td> 
 
     </tr> 
 
     <tr> 
 
      <td>February</td> 
 
      <td>$80</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 

 
    </div> 
 
</div>

的jsfiddle：http://jsfiddle.net/awu1tzoj/2/