スタイルシートでフレームの代用

先日の話に関連して，fj.net.www.browsersのフレーム非対応のブラウザについてというスレッドで，フレームの代わりにcssを使うサンプルが出ていた．

(1) とにかく内容をべたで作る。
(2) <div></div> で、分割する。たとえば、<div id="leftArea"> と <div id="rightArea"> に分割する。

(3) スタイルシートで位置を指定する。position プロパティで指定する。２カラムならこんな感じ。左を absolute で位置決めして、右の本体は、左のマージンだけ指定するというのがコツ。

div#leftArea {
        position: absolute;
        top: auto;
        bottom: auto;
        left: 20px;
        width: 200px;
}

div#rightArea {
        margin-left:240px;
}

Message-ID: <YAS.04Mar13014210@kirk.is.tsukuba.ac.jp>

フレームの場合、詳細内容のフレームがスクロールしてもメニュー部分のフレームはスクロールしない。これもcssで可能。

スクロールさせたい方で、大きさを(100%)を指定して、溢れたらスクロールさせるようにします。

div#rightArea {
        margin-left:240px;
        height: 100%;
        overflow: scroll;
}

Message-ID: <YAS.04Mar13014210@kirk.is.tsukuba.ac.jp>