html - フレームタグを使わずに別フレームのウェブページを作るには？

Question

http://www.twitch.tv/twitchを見ると、ページに左、中央、右の 3 つの「フレーム」があることがわかります。それぞれが互いに独立してスクロールします。ただし、このページは frame (または iframe) タグを使用していません。それで、彼らはどのようにそれをしますか？

Answer 1

divとcssで...

position: fixed; top: 0px; 

スクロール時に左右の列が動かないようにする

overflow: hidden; and overflow-y: scroll; 

コンテンツが定義された高さに収まらない場合、セクションの 1 つに追加のスクロール バーを追加します。

<div style="position: fixed; top: 0px; overflow: hidden; width: 100px">
   left content
    <div style="top: 10px; height: 200px; overflow: hidden; overflow-y: scroll;">   blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
    </div>
</div>

<div style="position: absolute; left: 120px; overflow: hidden; overflow-y: scroll; width:800px">
   center   blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
</div>

<div style="position: fixed; top: 0px; right: 0px;  width: 100px">
   right
</div>

フィドルを持っているhttp://jsfiddle.net/yR4tY/