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