フレームを使ったページ構成にはしたくないけど、ヘッダやメニュー部分は常に固定表示したい時などに利用できるかも？
※ Internet Explorer 6、Firefox 2、Opera 9.2 のみ動作確認。Mac版はノーチェックです(^^;)
【HTMLソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>ヘッダ固定CSSサンプル</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
body {
font-size: 12px;
margin: 0px;
padding: 0px;
/* IE6対策（スクロール時の表示ブレ防止） */
background-image : url("dummy");
background-attachment: fixed;
}
/* ヘッダ */
div#head-container {
color: white;
background-color: #789;
width: 100%;
height: 50px; /* ヘッダ部の高さ */
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
/* IE6対策（位置固定） */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+0)+'px');
}
/* ボトム */
div#bottom-container {
color: white;
background-color: #456;
width: 100%;
height: 30px; /* ボトム部の高さ */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 101;
/* IE6対策（位置固定） */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30)+'px'); /* 高さ30pxの場合 */
}
/* メインコンテンツ */
div#main-container {
color: gray;
background-color: #cde;
width: 100%;
height: 2000px; /* ダミー */
padding-top: 50px;
}
-->
</style>
</head>
<body>
<div id="layout">
<div id="head-container">ヘッダ固定部</div>
<div id="main-container">フレームを使わずにヘッダ等の表示部分を画面固定にするサンプル。<br />（Ex:メインコンテンツの高さ2000px）</div>
<div id="bottom-container">フッタ固定部</div>
</div>
</body>
</html>
この記事へのコメント