HTMLページの独立した列のスクロール

Question

私のHTMLページには2つの列があります。

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

それらのそれぞれが占有するページ

#left { 
    float: left; 
    width: 50%; 
} 

#right { 
    float: left; 
    width: 50%; 
} 

の半分は、それは彼らが独立して流れるようにそれを作ることは可能ですか？つまり、左の列を下にスクロールできますが、同時に両方の列を下にスクロールするのではなく、右の列の上にとどまりたいと思っています。

Answer 1

See this fiddle

#content, html, body { 
    height: 98%; 
} 
#left { 
    float: left; 
    width: 50%; 
    background: red; 
    height: 100%; 
    overflow: scroll; 
} 
#right { 
    float: left; 
    width: 50%; 
    background: blue; 
    height: 100%; 
    overflow: scroll; 
} 

Answer 2

はい。身長を制限する必要があります。実施例のためのSee this fiddle。

#content { 
    height: 10em; 
} 
#left { 
    float: left; 
    width: 50%; 
    background-color:#F0F; 
    max-height:100%; 
    overflow: scroll; 
} 

#right { 
    float: left; 
    width: 50%; 
    background-color:#FF0; 
    max-height:100%; 
    overflow: scroll; 
} 

Answer 3

列の高さを設定し、overflow: autoを設定します。すべてのルールを同じCSSセレクタに入れることもできます。このように：シンプルで

#left, #right { 
    float: left; 
    width: 50%; 
    height: 200px; /* Set your height here */ 
    overflow: auto; 
} 

Answer 4

、あなたのCSSを記述し、このよう

#content div{ 
    height: 300px; 
    width:200px; 
    float: left; 
    border:1px solid blue; 
    overflow-y: auto; 
} 

がLIVE DEMO

Answer 5

を参照してください以前の投稿は少し改善：

• スクロールバーなしで100％のhtmlと体の大きさ....
• 左のマージンと右のボックス（「自動」）
• 他のいくつかの詳細情報を必要なときだけ
• 個々のスクロールバー：それをお試しください！

フィドル：（LinuxのミントKDE上のFF）私のためにこれらの作業の2 independently scrolling divs

html, body { 
    height: 100%; 
    overflow: hidden; 
    margin: 0; 
} 
#content { 
    height: 100%; 
} 
#left { 
    float: left; 
    width: 30%; 
    background: red; 
    height: 100%; 
    overflow: auto; 
    box-sizing: border-box; 
    padding: 0.5em; 
} 
#right { 
    float: left; 
    width: 70%; 
    background: blue; 
    height: 100%; 
    overflow: auto; 
    box-sizing: border-box; 
    padding: 0.5em; 
}