1

これに基づいて、単純な 2 列のレイアウトを作成しました: 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 に答える