html - 等高嵌套div

Question

左右两列各有2个不同高度的嵌套div。
这些 div 形成一个类似框架的形状。参见 http://jsfiddle.net/5fA3q/ .

我尝试了不同的 css 等高技巧，它们可以工作，但不能在这种情况下使用，而且几乎可以使用
padding-bottom:999999px;
margin-bottom:-999999px;
和 absolute 定位 较短 的 inner-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/