トップに固定するヘッダーをCSSのみで作る方法（IE6対応）
IE6にも対応した、トップに固定するヘッダーをCSSのみで作る方法です。
position:fixが効くブラウザに対しては固定するヘッダーを作るのは簡単ですが、IE６には”position:fix”が効かないため、この参照した方法ではIE6に対しては[if lte IE 6]を使用して、ヘッダーをトップに配置し、コンテンツ部分を”overflow:scroll”でスクロールさせて、トップが固定されているようにみせかけています。
サンプルを作ってみました。
「サンプルdemo」
IE6でも確認しましたが一見、ヘッダーが固定されているように見えます。
サンプルのhtml
<link href="example.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lte IE 6]>
<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>
<![endif]-->
</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;
}
1 Comments & Tracbacks