CSS佈局：一面卷軸，另一面設置高度

Question

它看起來應該很簡單，但我無法實現這種佈局。這是一組使用CSS顯示的兩列：表格單元格。右欄有一個響應圖像，應設置兩者的高度。左欄有文本，如果需要應滾動。請參閱的jsfiddle：http://jsfiddle.net/xThB7/

<div class="details-wrap"> 
    <div class="details"> 
     <div class="scroll"> 
      Lorem ipsum 
     </div> 
     </div> 
    <div class="details-image"> 
     <img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg" /> 
    </div> 
</div> 

我歡迎任何解決方案，但我想避免使用JS

Answer 1

你只需要添加height: 100%到.details和.scroll類：

.details { 
    display:table-cell; 
    vertical-align:top; 
    width:50%; 
    background:#ccc; 
    line-height:1.5em; 
    height: 100%; 
} 

.scroll { 
    padding:15px; 
    overflow:auto; 
    height: 100%; 
} 

小提琴：http://jsfiddle.net/xThB7/2/