たきゃはしです

もう日常ブログにしよう

CSSだけでtwitterとかニコニコ動画とかhatenaみたいにヘッダを固定する方法

HTML CSS



意外とパッと思いつかない。下のソース、コピペで使えます


今回制作することになったサイト、というか管理画面。
コンテンツが少ないので管理メニューを固定したいと思います。


記事のタイトルでは『ヘッダを固定』と書いてますけど、
そっちの需要あるだろなと思って書いただけです。

HTMLとCSSのコーディング、実現は至って簡単


HTML

<body>

<div id="pagetop">
    pagetop area (このエレメントを固定します)
</div>

<div id="wrap">
    wrap area
</div>

<div id="pagebottom">
    pagebottom area（スクロールの確認用）
</div>

</body>


CSS

div#pagetop{
	width: 100%; /* 必須 */
	background: #000;
	color: #FFF;
	padding: 20px;
	position: fixed;  /* 必須 */
	top:0; /* 必須 */
	left:0; /* 必須 */
}
div#pagebottom  {
     background: #000;
}
div#wrap {
	width: 960px;
	margin: 0 auto;
	padding-top: 100px; /* 必須：div#pagetopのheightの余白、調整してください  */
	height: 1500px;
}


ちなみに、IE6には対応してません。というか『IE6のため』に時間を使って対応したくないですね。
一応、javascriptを利用して対策する方法はありますが、今回はあくまでCSSオンリーでの実装を試みました。