중첩 된 div가 같음

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

사용할 수 있지만 이전 브라우저에서 작동하지 않습니다.

는 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 :`absolute` poistioning없이

.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/