兩列柔性渦旋式溢流

Question

我有一個兩個欄佈局。左欄是重複消息的列表，右欄是幾個不同的菜單。我希望兩列始終爲右列和左列的消息應該溢出滾動相同的高度。在左列中還有一個不應滾動的標題。

的問題是，如果沒有明確設置滾動div的高度將擴大到包括所有跨度和永遠不會溢出。如何使左列與右邊的溢出滾動一樣高？對於我想要的一個例子，取消在.scroll的height:120px線。這裏是一個JSFiddle

下面是一個實物模型的基本結構

<div class='table'> 
<div id='c1' class='column'> 
    <h4>Column 1</h4> 
    <div class='scroll'> 
     <span></span><span></span><span></span> 
     <span></span><span></span><span></span> 
     <span></span><span></span><span></span> 
    </div> 
</div> 
<div id='c2' class='column'> 
    <h4>Column 2<h4> 
</div> 
</div> 

而CSS

div.table { 
    display:table; 
    width:500px; 
} 

div.table div.column { 
    display:table-cell; 
} 

#c1 {background-color:blue;} 
#c2 {background-color:red; height:150px;} 

.scroll { 
    background-color:#ccc; 
    overflow-y:auto; 
    //height:120px; 
} 

.scroll span { 
    height:28px; 
    background-color: #999; 
    display:block; 
    margin-top:2px; 
} 

我試圖做到這一點沒有任何JS的 - 但我可能有使用它。我試圖用display:flex一個解決方案，但無法獲取儘可能接近這一個。

編輯：我真的不知道右列的高度。它基於動態生成的內容進行更改 - 如果有人擴展菜單，則可能會增長。我希望左列保持固定在溢出滾動的右列高度。我已經更新了的jsfiddle：http://jsfiddle.net/s38ax4nq/2/

Answer 1

div.table { 
 
    display: table; 
 
    width: 500px; 
 
} 
 
div.table div.column { 
 
    display: table-cell; 
 
} 
 
#c1 { 
 
    background-color: blue; 
 
} 
 
#c2 { 
 
    background-color: red; 
 
    height: 150px; 
 
} 
 
.scroll { 
 
    background-color: #ccc; 
 
    overflow-y: scroll; 
 
    height: 150px; 
 
} 
 
.scroll span { 
 
    height: 28px; 
 
    background-color: #999; 
 
    display: block; 
 
    margin-top: 2px; 
 
}

<div class='table'> 
 
    <div id='c1' class='column'> 
 
    <h4>Column 1</h4> 
 
    <div class='scroll'> 
 
     <span></span><span></span><span></span> 
 
     <span></span><span></span><span></span> 
 
     <span></span><span></span><span></span> 
 
    </div> 
 
    </div> 
 
    <div id='c2' class='column'> 
 
    <h4>Column 2</h4> 
 
    </div> 
 
</div>

你可以改變你css如..

.scroll { 
    background-color:#ccc; 
    overflow-y:scroll; 
    height:150px; 
}