ヘッダ、フッタを固定してみる。

カテゴリ:CSSテクニック 2007年2月 7日 09:30

ひさびさの更新です。
さてさて、今回はとある案件で調べ物をしているときに見つけた手法で、面白かったので自分で作りつつ解説をしてみようと思います。

ヘッダ、フッタの固定 デモ

概要を話すと、縦幅 100% 表示にしたコンテンツボックスの上と下に、position を絶対指定にして固定配置したもの。肝は、body と html 部分にoverflow: hiddenを設定するところかな。

CSSソース

html,body#wrapperheight: 100%を指定することで#wrapperのボックスは縦幅いっぱいに広がります。
また、#wrapperposition: relativeを指定することでヘッダとフッタ部分の絶対配置の基準にします。

ヘッダとフッタに関しては

CSSソース

絶対配置をすること、z-indexをコンテンツのボックスより大きく設定することと、コンテンツ部分のスクロールバーを表示するために右側に余白を設けています。
(余白と書いていますが、幅をコンテンツ部分より 15px ほど短くすることで余白としています)

最後にコンテンツ部分です。

CSSソース

メインコンテンツ部分は、ふたつのボックスからなります。
まず、コンテンツを表示する部分。ここにoverflow: autoを設定し、溢れた物をスクロールできるようにします。

そして内包するボックスに対してpaddingを設定します。
この値は、上下のヘッダ、フッタ部分にかぶらないように余白を設定しているものです。
(今回のサンプルではヘッダ、フッタと同じ手法で左側にメニューをおいているため、左側にも余白を取っています)

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • Hatenaブックマークに追加 Hatenaブックマーク数
  • livedoorクリップへ追加 livedoorクリップ数
  • Buzzurlにブックマーク Buzzurlブックマーク数
  • POOKMARK Airlinesへ追加
  • del.icio.usに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/34

コメント

1 - 通りすがり さん

サンプルについてですが、画面が小さい時に横スクロールバーが表示されないのは仕様でしょうか?→ 結果:肝心の縦スクロールバーも表示されない
(ff2.0, ie7, ie6ともに)

2008年1月18日 11:34

2 - えど さん

>>通りすがりさん
コメントありがとうございます。
そうですね、これはサンプルの仕様です。
この固定の方法は、htmlおよびbody部分に「overflow: hidden」を使い、
全体をひとつのdiv要素で括っています。

その中の1要素にスクロールバーを表示(overflow: auto)しているので
このような挙動になっています。
そのため、ウィンドウが小さい場合でも、中のdiv要素自体は縮小されないため
スクロールバーが出ていない状態になっています。

2008年1月18日 12:08

3 - 名無し さん

サンプル参考にさせていただきました。
質問なのですが、他ブラウザは問題ないのですがOperaでだけ表示が少しおかしくなります。
スクロールするともう一段階下がるというか、フッタの下に余白ができてしまうのです。
自分でも模索してみたのですが良い解決方法が見つかりませんでした。
何か方法はないでしょうか?

2008年12月11日 14:30

4 - えど Author Profile Pageさん

>>3 - 名無し さん
Operaではあまり正確にテストしていなかったかもです;
時間があるときに確認したいと思います。
ご指摘ありがとうございます。

2008年12月18日 11:07

5 - ABYSS さん

この方法でヘッダを固定すると、本文中のアンカーにジャンプしたときにアンカーのある部分がブラウザの先頭部分(ヘッダに隠されている部分)になってしまい、ジャンプ先が隠れてしまうんですが、これの解決方法はないんでしょうか?

2008年12月25日 22:49

6 - えど Author Profile Pageさん

>>5 - ABYSS さん
そうですね、ちょっとむずかしいかもしれません。。
IE6を無視してもいいのであれば、position:fixedを使ったら確実なんですが・・。
ページ内のアンカーは想定していないので、すみません。

2008年12月27日 12:39

7 - k さん

サンプルを参考にさせていただいています。
ひとつ可能かお聞きしたいのですが、
リキッドレイアウトで、ブラウザの縦の長さを最小限まで
縮めた時、一定の高さ以上は縮まないという設定は
CSSでは可能でしょうか。

2009年1月29日 12:40

8 - えど Author Profile Pageさん

>>7 - k さん
CSSでは、という問いなら「可能です」。
CSSにはmin-heightというプロパティがあり、
そこで指定されているpx(や%など)以下にはならないようになります。

最低でもこの高さは確保したい、というときに使いますが、
今回のサンプルでは高さが100%のため、
ブラウザのサイズを変えた時にそれ以下にならないようする、
という使い方ができます。
(サンプルの場合は#wrapperにmin-heightを設定します)

しかしながらこのmin-height、残念ながらIE6は対応していません。
さらに、IE7も互換モードの場合はこのmin-heightを解釈してくれないため、
同様に使うことができません。

ただ、どちらも解釈されないだけで指定をしておいても
特に影響はないのでモダンブラウザ(と標準モードのIE7)向けに
指定しておくと希望の動きになるかと思います。

(IE6で、となるとCSSだけでは無理ですので、Javascriptなどを使う必要が出てきます)

さらに別の問題として、body要素のoverflowがhiddenのため、
もし仮に、このmin-heightで最低限の高さを確保しても、
bodyにはスクロールバーが出てくれないので、
フッターなどのコンテンツを見ることができなくなってしまう可能性があります。

参考になりましたでしょうか?

2009年1月29日 13:13

9 - k さん

えどさんへ。

なるほど…。
min-height !ちょっとこれを使って調整してみます…。
ものすごく参考になりした!
(Javaも検討してみようと思います)

ご丁寧に、どうも有難うございました!!

2009年1月29日 17:00

10 - \-e-\ さん

サンプル参考させていただきました。
知ってたら教えてください。
固定の要領で各ページに同じメニューバーを固定できますか?
うまくできず困ってます(><)
javaは難しい・・・・・。

2009年2月 3日 16:04

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。