仕事関係で最近、CSSとかJavaScriptをやたらと触っているけれど、
未だに細かい部分がよくわからないなー。
ついDivタグを無闇やたらと使ったり、結局テーブルタグになってしまったり。
んで、今日の引っ掛かりどころ。
「ASP.NET使う関係上、なるべくフレームは使いたくない。
けれど、縦長画面でヘッダー部分はスクロールさせたくない。」
を実現するために、CSSで擬似フレームを作成。
test.html
----------------------------------------------------------------
<div class="topheader">ここは固定のヘッダー<br /></div>
<div class="spacer">ここは重なって見えないけどヘッダと同じ高さ確保用に必要<br /></div>
<div class="contents">スクロールOKなコンテンツ部分</div>
----------------------------------------------------------------
CSS
----------------------------------------------------------------
.topheader
{
width : 100%;
background-color : aqua;
position : fixed;
top : 0px;
left : 0px;
z-index : 100;
border-bottom : ridge 2px;
}
----------------------------------------------------------------
なんとなくこんな感じでIE7ではうまく動いてる。FireFoxも大丈夫。
けど、IE6では一緒にスクロールしてしまう……
これはいかんなぁと、思っていたら、IE6でもIE7みたいな動きにしてくれるJavaScriptがGoogleで公開されているのを発見。
さっそくファイルヘッダーに読み込み指定追加してみたら、
おお!なんかFixedされてる!
……と喜んだんだけどね。
なんか、コンテンツ部分にあるselectタグが軒並み上に重なって表示されてくるんだよ…orz
で、調べたら、それもIE6のバグなんだってさ。
仕方ないので、IE6の時だけは擬似フレームじゃなくて、普通にスクロールするようにしました…。
(class=spacerのdisplayをnoneにして、詰めて表示させる)
なんか良い方法ないかなー…無理だろうな…。
