等高嵌套divs

Question

在左右兩列有不同高度的嵌套div。
這些div形成一個框架狀的形狀。見http://jsfiddle.net/5fA3q/。

我試過不同的CSS相等高度的技巧，他們的工作而不是在這種情況下，幾乎得到了它與
padding-bottom:999999px;
margin-bottom:-999999px;
和absolute定位短內DIV工作。

但唉，padding-bottom已不見了。見http://jsfiddle.net/5fA3q/11/

我希望有人知道解決方法。

Answer 1

您可以使用display:table-cell，但請注意它不適用於舊版瀏覽器。

HTML：

<div class="wrapper"> 
    <div class="left"> 
     <p>Left</p> 
     <p>Left</p> 
     <p>Left</p> 
     <p>Left</p> 
     <p>Left</p>   
    </div> 
    <div class="separator"></div> 
    <div class="right"> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
     <p>Right</p> 
    </div> 
</div> 
<div class="footer"></div> 

CSS：

.wrapper{ 
    width: 500px; 
    display:table; 
} 
.wrapper>div{display:table-cell;} 
.left{ 
    border:10px solid #0188ed; 
    margin-right:10px; 
    background: #0150e1; 
    width: 180px; 
} 
.right{ 
    width:270px; 
    border:10px solid #0188ed; 
    background: #0150e1; 
} 
.footer{ 
    background:#0181ec; 
    height: 50px; 
    width: 500px; 
    border-top: 10px solid #ffffff; 
} 

DEMO: http://jsfiddle.net/5fA3q/12/