無法將元素擴展到高度= 100％

Question

我使用的是Win XP，並且在Firefox，Chrome和IE中注意到了這一點。我有三個塊元素，垂直對齊。我希望容器的最小高度爲600像素，我希望中間元素佔用儘可能多的垂直空間。問題是，即使我爲中間元素指定高度：100％，它也不會擴大以填充空間。下面是HTML ...

 <div class="productDetailsPanel"> 
      <div class="tabPanel"> 
       <div class="tabBar">Tab Bar</div> 
       <div class="tabContent">Content</div> 

       <table> 
        <tr> 
         <td><button value="Save">Save</button></td> 
         <td><button value="Reset">Reset</button></td> 
        </tr> 
       </table>  
      </div> 
     </div> 

這裏是CSS ...

.productDetailsPanel { 
    width: 74%; 
    min-height: 600px; 
    overflow-x: hidden; 
    border-color: #BBBBBB; 
    border-style: solid; 
    border-width: 1px; 
    margin: 10px 10px 0 5px; 
    background-color: yellow; 
} 

.tabPanel { 
    height:100%; 
    width: 100%; 
    position: relative; 
    background-color:pink; 
    padding: 2px;  
} 

.tabBar { 
    height: 2em;  
    background-color: orange; 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 2em; 
} 

.tabContent { 
    position: relative; 
    top: 0px; 
    background-color: silver; 
    width: 100%; 
    height: 100%; 
} 

我還創建了這個的jsfiddle來說明這種瘋狂 - http://jsfiddle.net/XAYWZ/。任何人都知道我可以如何調整我的CSS，使中間面板佔用儘可能多的垂直空間？

Answer 1

變化與它的按鈕欄

position: absolute; 

，並給它

bottom: 0px;