IE6では絶対位置配置のposition: fixed;が使用できませんが、少し工夫することで擬似的に再現ができます。
サンプルページ
以下がサンプルページになります。
仕組み
サンプルのソースのHTMLがこちら
<body>
<div id="menu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
<div id="content">
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
<p>コンテンツ内容</p>
</div>
</body>
そしてCSSで以下のように指定します。
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 90%;
}
#menu {
width: 230px;
position: fixed;
top: 10px;
left: 10px;
border: 1px solid #cccccc;
background-color: #eeeeee;
}
#menu ul {
margin: 10px 10px 10px 25px;
}
#content {
margin: 10px 10px 10px 250px;
padding: 10px;
background-color: #eeeeee;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
#menu {
position: absolute;
}
</style>
<![endif]-->
仕組みは、まず普通にfixedが使用できるブラウザで設定をします。そのあとIE6用にCSSを追記します。
IE6用のCSSの指定
IE6用のCSSは上記CSSソース内の「<!–[if lt IE 7]>」から「<![endif]–>」の中に記述した指定です。「<!–[if lt IE 7]>」というのはIE7以下に適用する条件分岐指定なので、こちらを
使用してIE6だけに適用されるようにします。
内容としては
- htmlにoverflow:hidden;を指定し、ウインドウサイズからはみ出した領域を見せなくします
- bodyにheight: 100%;を指定し、高さをウインドウサイズいっぱいにし、overflow: auto;ではみ出した領域のコンテンツをスクロールで表示させるようにします
- menuにposition: absolite;を指定し、絶対配置にします
これで完成です。
普通はhtml要素で出ているスクロールバーをbody要素を使って出しています。
注意点
IE6が標準準拠モードの時でしか動きません。なのでxml宣言を指定すると動作しませんのでご注意を。
またいろいろ調べていたらこちらにもっと詳細に書いてありました。
コメント