1

我基于此创建了一个简单的两列布局： 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/

Firefox 18.0.2 几乎按预期显示。在其他浏览器中，左栏不是从页面顶部开始，而是从左下角开始。

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

4

2 回答 2

2

我对你的 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;
}
于 2013-02-10T15:45:50.193 回答
0

添加此 CSS 将更正列的对齐方式：

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

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

于 2013-02-10T17:15:59.587 回答