最小高度和滾動比例

我不確定這是否可能，但我想我會問。最小高度和滾動比例

我有一個div佈局，它是div容器中的兩列。這些是使用內聯塊和百分比寬度排列的。

基本佈局是如此

<div id="containter" style="width:100%"> 

<div id="leftDiv" style="width:20%; height:100%; display:inline-block; overflow-y:scroll"> 
    List of Content 
</div> 

<div id="rightDiv" style="width:80%; height:100%; display:inline-block; min-height:500px; vertical-align:top"> 
    Some expanding information 
</div> 

</div>

好了，所以這個基本的佈局的偉大工程。我遇到的問題是，因爲您可能已經注意到我的左列有溢出，右列有最小高度。這個想法是，左列將顯示項目列表，但我不希望該列表擴展包含div的高度，我希望它適合包含div的100％並滾動。

但是，我會喜歡在右邊div的內容能夠拉伸容器div的高度，但它始終有一個最小高度500px和左邊的div與它一起成長。

暫時我會寫一個JavaScript修復，但是我想知道這是否可以在純CSS中做到這一點。也許有什麼新的CSS3/HTML5這將有助於？

感謝您的幫助球員。

來源

2011-10-20 Loz Blake

着名的100％高度div ...我的這個解決方案只是人造背景，沒有一個*適當的* CSS解決方案，雖然你的問題... – jackJoe

是的的確是！在CSS中一定有辦法做到這一點，我希望有一些天才知道它。有時使用身高100％可能會非常直觀！ –

我發現這個：http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/和它的工作，但如上所述，它不支持在IE ... – jackJoe

display:table;實際上並沒有這樣做。所要問的問題是要左欄滾動，而不是增加文檔的長度。有關該問題的說明，請參閱this fiddle。

我知道強制overflow: scroll工作的唯一方法是定義高度; max-height:500px;作品like so，但不能設置100%而不會獲取垃圾結果。

它看起來像獲得佈局和滾動你的JS解決方案是必要的。

來源

2011-10-24 05:38:45 egid

最小高度和滾動比例

回答

相關問題