トップに固定するヘッダーをCSSのみで作る方法(IE6対応)

IE6にも対応した、トップに固定するヘッダーをCSSのみで作る方法です。

position:fixが効くブラウザに対しては固定するヘッダーを作るのは簡単ですが、IE6には”position:fix”が効かないため、この参照した方法ではIE6に対しては[if lte IE 6]を使用して、ヘッダーをトップに配置し、コンテンツ部分を”overflow:scroll”でスクロールさせて、トップが固定されているようにみせかけています。

サンプルを作ってみました。

サンプルdemo

IE6でも確認しましたが一見、ヘッダーが固定されているように見えます。

サンプルのhtml

<link href="example.css" rel="stylesheet" type="text/css" media="all" />
<!--&#91;if lte IE 6&#93;>
<style type="text/css">
html, body{
	overflow:hidden;
	padding:50px 0;
	margin:-50px 0;
	padding:0;
	margin:0;
}
/* hide form ie5*/
#container{
	position:absolute;
	overflow-y:scroll;
	width:100%;
	height:100%;
	z-index:1;
}
/* end hack */ 
#header-bar,#footer{position:absolute;}

/* reduce page to allow the scrollbar to remain visible */
#header-inner,#footer-inner {margin-right:17px;}

</style>
<!&#91;endif&#93;-->
</head>

<body>
<div id="header-bar">
	<div id="header-inner">ヘッダー固定</div>
</div>

<div id="container">
<div id="contents">
<p>(略)</p>
</div>

<div id="footer">
	<div id="footer-inner"> Fixed footer </div>
</div>
</div><!-- container -->
</body>

サンプルのcss

html, body {
	margin:0;
	padding:0
	height:100%;
	background: url(images/headerback.png) ;
}

#header-bar {
	position:fixed;
	top:0px;
	left:0px;
	height:50px;
	width:100%;
	z-index:999;
	overflow:hidden;
	background:url(images/headertop.png) repeat-x;	
}
#header-inner{
	height:50px;
	color: #fff;
}
#footer-inner {
	height:150px;	
	background:#333;
}
#footer {
	width:100%;
}
#contents {
	padding:50px 0 0 0;/* padding height same as footer/header to preserve space*/
	position:relative;
	width: 950px;
	margin: 0 auto;
}
p {
	margin:0 0 1em;
}

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ