IE6でスクロールさせないフレームのスタイルシート

質問

上下2段のフレームをスタイルシートで作成して、
下の方の段(mainbox)だけはスクロールさせ、
上の段(header)はスクロールさせないで固定させたいのですが、
以下のCSSでは、Geckoで表示させると意図通り
上の段が固定されるのですが、IE6では上下段とも
一緒にスクロールしてしまいます。
タグを色々試して、Webも検索してみましたがギブアップです。
どのようにすればIE6で上の段を固定したまま、
下の段だけスクロールできるのでしょうか？

body {margin:0; padding:0;
height: 100%;
}
#header{
background-color: #2F2;
position: fixed; top: 0; left:0;
height: 60px;
width: 100%;
z-index: 10;
}
#mainbox{
background-color: #7F7;
margin: 60px 0 0 0;
_margin: 0 0 0 0;
overflow: auto;
}

回答No.1

noname#66720 · ベストアンサー

擬似フレームを使います。
簡単なソースはこんな感じで

<h1 id="HEADER">header</h1>
<div id="CONTENT"></div>

html,body {
height:100%;
overflow:hidden; }

#HEADER {
position:absolute;
height:50px; }

#CONTENT {
height:100%;
overflow:auto; }

#CONTENT内の一番最初の要素が#HEADERにかぶってしまうのでpadding等を指定してやってください。

ちなみに、この方法は一部のブラウザでマウススクロールでページの移動ができなくなる欠点があります。
一応、IE6とモダンブラウザは問題なかったはずなのですが、注意はしたほうが良いと思います。

この方法で都合が悪いときはjavascriptを使ってIE6以下(場合によっては7以下)をposition:fixed;に対応させてやる方法があります。
http://www.doxdesk.com/software/js/fixed.html

お礼

早速のご回答ありがとうございました。
疑似フレームですか。一回試したんですが、何となくうまくいきませんでした。
結局、http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/header_footer.html
などを参考にして以下のようなCSSで IE6/NN共何とか所望の表示ができるようにまりました。
(NNでは、ホイールでスクロールできませんが)
もう少し勉強しながらいじくってみます。

* { margin: 0px; padding: 0px;
}
body {
overflow: hidden;
padding-top: 60px;
}
#header {
position: absolute; top: 0px; left: 0px;
width: 100%;
height: 60px;
background-color: #3FFF3F;
}
#mainbox {
overflow: auto;
position: relative;
width: 100%;
height: 100%;
background-color: #BFFFBF;
}