使div（顯示：表格）匹配外部容器的高度寬度最小高度

Question

我需要容器寬度最小高度以容納可變大小的內容，但同時我需要在父容器內部垂直對齊的內容。

JS小提琴：http://jsfiddle.net/mr_goodcat/n5Pq3/6/

HTML：

<table class="mainLayout"> 
    <tr> 
     <td> 
      <div class="contentLayout"> 
       <div class="tbl"> 
        <div class="tcell"> 
         <div class="inner"> 
          CONTENT 
         </div>  
        </div> 
       </div> 
      </div> 
     </td>        
    </tr> 
    <tr> 
     <td> 
      BOTTOM 
     </td>   
    </tr> 
</table> 

CSS：

body, html { 
    background-color: lightgreen; 
    height: 100%; 
    width: 100%; 
} 

.mainLayout { 
    height: 100%; 
    width: 100%; 
} 

.contentLayout { 
    width: 100%;  
    min-height: 200px;  
    border: 1px solid red; 
    display: block; 
} 

.tbl { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 

.tcell { 
    width: 100%; 
    height: 100%; 
    background: purple; 
    display: table-cell;  
    text-align: center; 
    vertical-align: middle; 
} 

.inner { 
    display: inline-block;  
} 

要對齊內出現紅方紫盒（最小高度containter） 。我怎麼做？

Answer 1

試試這個http://jsfiddle.net/n5Pq3/30/這是webkit的一個已知問題。解決方法是使用

position:relative; //on parent 

position:absolute; // on child 

想看看更詳細然後按照此鏈接... https://bugs.webkit.org/show_bug.cgi?id=26559