IE6でposition:fixedの真似ごと
下にメニュー固定で出したい。
しかしIE6だとposition:fixedできないので、下メニュー以外のコンテンツをdivで囲って、html,body,そのdivにheight:100%で、viewportの高さ100%にあわせ、overflow-y:scrollをそのdivにつけて、html,bodyのoverflow-y:hiddenで本来のスクロールバーを出さない。
bottom:0にするときには表示領域の高さが奇数の時、bottom:0pxが1pxずれるのを注意。
<body>
<div class="main">main</div>
<div class="bottom">bottom</div>
</body>html,body{
height:100%;
}
html{
overflow-y:scroll;
}
div.main{
color:#888;
}
div.bottom{
background:black;
color:white;
position:fixed;
bottom:0;
left:10%;
width:80%;
}
/* IE6 */
* html,
* html body{
overflow-y:hidden;
}
* html div.main{
height:100%;
overflow-y:scroll;
}
* html div.bottom{
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}何がしたいのかというと、こんな感じのUIにしたり、右下にちょこっとページ先頭へ戻るリンクを常時表示したり、ちょこっとロゴ的なものだの、お遊びの要素を表示させたりしたいなーと。
copyrightとかいっつも下についてるとうざいだけだけど、いつもすぐにアクセスしたい機能（検索やページ先頭へ戻るとか）は、すぐに使えるようにしておいた方が便利な気がする。
仕組みについてはこのheight:100%の仕組みを参照
- コメントを書く
- TrackBack URL （この記事についてトラックバックしたい時は以下のURLを指定してください）
- http://gyauza.egoism.jp/cgi/mt/mt-tb.cgi/1832