動かないメニュー

web

question:1100183948
　画面上部に固定されたメニューを付けるにはどうしたらいいのかってことで作ってみた。フレームを使わないフレームのような物。

<html>
<head>
<title>フレームっぽい物</title>
<style TYPE="text/css">
<!--
body {
	overflow: hidden;
}
#content {
	overflow: auto;
}
-->
</style>
<script>
function setLayerWH(idName,W,H) {
	if(document.layers) {						// NN4
		document.layers[idName].resizeTo(W,H);
	} else if(document.getElementById) {				// IE5+, Mozilla, Opera 7
		document.getElementById(idName).style.width = W + 'px';
		document.getElementById(idName).style.height = H + 'px';
	} else if(document.all) {					// IE4, Opera 6
		document.all(idName).style.pixelWidth  = W;
		document.all(idName).style.pixelHeight = H;
	}
}
function startup() {
	setLayerWH('content',document.body.clientWidth-10,document.body.clientHeight-33);
}
</script>
</head>
<body onload="startup()">
<div id="topmenu">
<a href="#">メニュー１</a>
<a href="#">メニュー２</a>
<a href="#">メニュー３</a>
<a href="#">メニュー４</a>
</div>
<div id="content">
<script>
var i;
for(i=0;i<50;i++) {
 document.write(i+'<br>');
}
</script>
</div>
</body>
</html>

　5分ぐらいで作った物だから変な部分があるかもしれないがだいたいこんな感じ。クロスブラウザっぽいような事をしてるように見えてdivブロックを使っている時点でNN4では動くわけなさそう。

　動作としては、もともと表示されているスクロールバーを消し、メニュー部分とコンテンツ部分それぞれをdivを使って分け、コンテンツ部分に対してoverflowをautoとし、はみ出した場合はスクロールバーを表示させてスクロールするようにしているだけ。

　気になる部分と言えばやはりウインドウサイズを取得する所。即値が入っていて、しかもそれはフォントサイズによって変わってしまいそうだ。まあ多少ズレるだけでそれを気にしなければいいんだけれど、一番問題なのはIEでしか期待通りの動作をしてくれなさそうなこと。

　動作させてみたのは普段使っているIE6と、NN系列っぽいし無料だからなんとなく入れてみたFireFoxだけだ。

　IE6はもちろん問題ないが、FireFoxだとぱっと見普通なのに実はスクロールしないという。マウスのホイールはともかく、カーソル上下やPageUP/PageDownでもスクロールしない。画面内をクリックしても変化無し。一応スクロールバーをドラッグすればスクロールするものの…。

　なんだかなあ。やっぱこの質問の回答にあった方法しかないのかな。