两列布局：问题列

Question

我基于此创建了一个简单的两列布局： How to control overflow of table cell in Firefox?。

左列应该是可滚动的（自上而下），右列应该是修复的。

HTML：

<div id="col1"> 
    <div id="list"> 
     <div class="row">Test 1</div> 
     <div class="row">Test 2</div> 
     <div class="row">Test 3</div> 
     <div class="row">... more rows</div> 
    </div> 
</div><div id="col2"></div> 

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #0c0; 
} 
#col1 { 
    width: 25%; 
    height: 100%; 
    display:inline-block; 
    background-color: #c00; 
} 
#col1>#list { 
    width: 100%; 
    overflow: auto; 
} 
#col1>#list>.row { 
    padding: 5px; 
    border-bottom: 1px solid #ccc; 
} 
#col2 { 
    width: 75%; 
    height: 100%; 
    display:inline-block; 
    background-color: #00c; 
} 

请参阅本演示： http://jsfiddle.net/bitas/qRtjN/

火狐18.0.2显示它几乎符合市场预期。在其他浏览器中，左列不是从页面顶部开始，而是在左下角。

如果我删除“div＃list”，它会按预期工作。这个div有什么问题？我该如何修复它？

Answer 1

我修改了一下你的CSS，它确实有效。那就是：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #0c0; 
} 
#col1 { 
    width: 25%; 
    height: 1000px; 
    display:inline-block; 
    background-color: #c00; 
} 
#col1>#list { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 
#col1>#list>.row { 
    padding: 5px; 
    border-bottom: 1px solid #ccc; 
} 
#col2 { 
    width: 75%; 
    height: 100px; 
    display:inline-block; 
    background-color: #00c; 
    position:fixed; 
    top:0; 
    right:0; 
} 

Answer 2

添加此CSS会纠正你列的排列：

#col1, #col2 { 
    vertical-align: text-top; 
} 

http://jsfiddle.net/qRtjN/13/