ヘッダーとフッターを固定
こんにちは、ゼノフィ渡部です。
CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。
ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。
コンテンツは「overflow: auto;」でヘッダーとフッター以外のスクロール制御をするようにし、「padding: 150px 0 150px;」でスペースを取って、通常時にヘッダーとフッターの後に潜り込まないようにしています。
問題はIE6です。IE6は「position: fixed;」に対応していないで、IE6用のプロパティを用意します。25行目の「_height: 100%;」で一度、画面全体の高さをいっぱいにしてフッターまでを表示させています。「position: fixed;」の代わりに31行目に「_position: absolute;」を使用し、ヘッダーとフッターをスクロールしても位置が固定するようにしています。36行目の「_margin-right: 17px;」はIE6のスクロールバーと同じ幅を指定しています。これを指定しない場合、IE6のスクロールバーがヘッダーとフッターの後に潜り込んでしまいます。「.contents_wrap」の40~42行目のプロパティはコンテンツがブラウザの高さを超えた場合、スクロールを出すようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | /* ヘッダー */ .header_area { position: fixed; /* 固定 */ top: 0; /* 一番上に表示 */ width: 100%; /* 中央に表示 */ } /* コンテンツ */ .contents_area { width: 700px; overflow: auto; /* スクロールする範囲を制御 */ margin: 0 auto; padding: 150px 0 150px; /* コンテンツ上下にスペース */ } .footer_area { position: fixed; /* 固定 */ bottom: 0; /* 一番下に表示 */ width: 100%; /* 中央に表示 */ } /* IE6 */ html, body { _height: 100%; _overflow: hidden; } .header_area, .footer_area { _position: absolute; } .header_block, .footer_block { _margin-right: 17px; /* IE6のスクロールバーの幅分のスペース */ } .contents_wrap { _width: 100%; _height: 100%; _overflow: auto; } |
ヘッダー、コンテンツ、フッターと3つに分けています。「<div class="contents_wrap">」はIE6用に使用しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- ヘッダー --> <div class="header_area"> <div class="header_block"> <div class="header_box"> <h1> CSSだけでヘッダーとフッターの位置を固定 </h1> </div> </div> </div> <!-- /ヘッダー --> <!-- コンテンツ --> <div class="contents_wrap"> <div class="contents_area"> <div class="content_block"> ヘッダーとフッターが固定になっています。 </div> </div> </div> <!-- /コンテンツ --> <!-- フッター --> <div class="footer_area"> <div class="footer_block"> <div class="footer_box"> <p> フッター </p> </div> </div> </div> <!-- /フッター --> |
サンプルを見るとスクロールをしても、ヘッダーとフッターが画面上で常に同じ位置に表示されていることがわかります。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | body { margin: 0; padding: 0; background: #FBF7EC; } /* ヘッダー */ .header_area { position: fixed; /* 固定 */ top: 0; /* 一番上に表示 */ width: 100%; /* 中央に表示 */ } .header_block { background: #FDDC80; } .header_box { width: 700px; margin: 0 auto; } .header_box h1 { margin: 0; padding: 20px 0; font-size: 34px; text-align: center; } /* コンテンツ */ .contents_area { width: 700px; overflow: auto; /* スクロールする範囲を制御 */ margin: 0 auto; padding: 150px 0 150px; /* コンテンツ上下にスペース */ } .content_block { padding: 300px 10px; border: 1px solid #CCC; } /* フッター */ .footer_area { position: fixed; /* 固定 */ bottom: 0; /* 一番下に表示 */ width: 100%; /* 中央に表示 */ } .footer_block { background: #FDDC80; } .footer_box { width: 700px; margin: 0 auto; } .footer_box p { margin: 0; padding: 20px 0; font-size: 34px; text-align: center; } /* IE6 */ html, body { _height: 100%; _overflow: hidden; } .header_area, .footer_area { _position: absolute; } .header_block, .footer_block { _margin-right: 17px; /* IE6のスクロールバーの幅分のスペース */ } .contents_wrap { _width: 100%; _height: 100%; _overflow: auto; } |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- ヘッダー --> <div class="header_area"> <div class="header_block"> <div class="header_box"> <h1> CSSだけでヘッダーとフッターの位置を固定 </h1> </div> </div> </div> <!-- /ヘッダー --> <!-- コンテンツ --> <div class="contents_wrap"> <div class="contents_area"> <div class="content_block"> ヘッダーとフッターが固定になっています。 </div> </div> </div> <!-- /コンテンツ --> <!-- フッター --> <div class="footer_area"> <div class="footer_block"> <div class="footer_box"> <p> フッター </p> </div> </div> </div> <!-- /フッター --> |