要素を高さ= 100％に展開するのに問題があります

Question

私はWin XPを使用しており、Firefox、Chrome、IEでこれを認識しています。 3つのブロック要素が垂直に整列しています。私は、コンテナの最小の高さが600ピクセルになるようにしたい、と私は可能な限り垂直方向のスペースを取るように中間の要素をしたいと思います。問題は、たとえ私が中央の要素の高さ：100％を指定しても、それが空間を埋めるように拡張しないということです。ここで私はまた、この狂気を説明するために、このJSFiddleを作成し

.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%; 
} 

... 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です - http://jsfiddle.net/XAYWZ/。中間パネルができるだけ多くの垂直スペースを占めるように、どのように私のCSSを調整することができますか？あなたは、既存のコードを持つこと

Answer 1

変更

position: absolute; 

にその中にボタン付きのバー、それに属性

bottom: 0px;