親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック

カテゴリ:CSSテクニック 2009年6月16日 17:52

更新履歴

[09/06/17]
Opera でも問題なく動作するよう修正を加えました。
[09/06/16]
すっかり min-height の存在を忘れていました(;´д`)
今回の場合、まさに min-height が適任でしたね・・。

ということで、min-height を使用したバージョンをアップしました。(ただ、あまりないとは思いますがコンテンツ幅が動的に変わる、なんて場合は前バージョンのほうが応用が利くかもしれません)

これに伴って、完全対応ブラウザに IE6, 7 が追加されます。(相変わらず Opera はスクロールバーが出ませんでした・・)n

このブログのメニューのように、メニューだけブラウザ領域いっぱいに配置する、というデザインはよく見かけると思います。

しかし、コンテンツ全体をひとつの div で括ってしまうと横幅が固定のデザインの場合、例えメニューに対して width: 100%;などとしても div で設定されている横幅いっぱいに広がるのみで、ブラウザ領域いっぱいまでには広がりません。今回のテクニックは、そんなときでもメニューを横幅いっぱいに広げるテクニックです。

固定幅のボックスに配置したメニューをブラウザいっぱいに広げるテクニック デモ

Firefox Google Chrome Safari Opera IE

※ただし、ver1.0 では IE6, 7, Opera については、ブラウザをコンテンツ幅より小さくしてもスクロールバーが表示されません。

▼EntryMore▼

さて、肝となる部分を抜き出しながら、今回のテクニックの詳細を説明したいと思います。
まずは以下の HTML と CSS を見てください。(説明は ver2.0 のものです)n

HTML ソース

CSS ソース

テクニックの詳細

#containerのスタイルを見てもらうと、width: 830px;となっています。そして、ヘッダおよびメニュー部分も #container に内包されています。

デモを見てもらうと分かりますが、ヘッダおよびメニューがブラウザ領域いっぱいに広がっているのが確認できると思います。

テクニックの肝

今回のテクニックの肝は、html,bodyそして横幅をいっぱいに広げたい要素への指定の仕方です。

html 要素への指定

html から順に見ていきます。
html にはoverflow: auto;を指定します。

body 要素への指定

body 要素にはoverflow-x: hidden;,min-width: 830px;,position: relative;を指定します。

overflow-x: hidden を指定することで今回の最大の肝である「コンテンツをブラウザ領域いっぱいに広げるテクニック」を使用したときに生じる横スクロールバーの拡大を防ぎます。

さらにmin-width: 830px;を指定することで、ブラウザを縮められても overflow-x: hidden でコンテンツが切れるのを防ぎます。

ブラウザ領域いっぱいに広げる要素への指定

最後に、ブラウザ領域いっぱいにしたい要素(デモでは#header)を見てみます。

#header への指定はmargin: 0 -500%;,padding: 0 500%;,width: 100%;です。

やっていることを簡単に説明すると、ネガティブマージン(マイナス値の margin)と padding による相殺です。
margin の左右を -500%、padding の左右を 500% とすることで、#container の幅を越えて左右に領域を生成します。

上の方法で左右に領域を生成すると、500% という大きな値のため横方向にとても長いスクロールができてしまいます。それが、上記で body 要素に対して overflow-x: hidden を指定した理由です。

ちなみにこの 500% とという数値はブラウザを引き延ばした際に生じるスペースを埋められる数値であればいくつでも構いません。ただ、100% くらいの少ない数値だとデュアルディスプレイの人などがブラウザを極端に左右に長くした場合、変なところで切れてしまう、ということがありえます。(まぁそこまでやられたら無視してもいいかもしれませんが・・w)

以上で完成です。IE7と、IE8 を含むモダンブラウザ(Opera を除く)で正常に動きます。
が、例によって IE6 は微妙に動作が異なるためちょっとした細工をしなければなりません。

IE6 対策

といっても大したことはしません。
html, body 要素双方にheight: 100%;を追加し、かつ html 要素の overflow の値を逆転させ、さらに overflow-x を auto に、body 要素には overflow-y: auto を追加するだけです。n

縦横両方にスクロールバーが出るくらい小さいウィンドウになると若干操作性が落ちますが、そこまで小さく見ることは稀だと思うので問題ないと思います。

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

  • このエントリーをはてなブックマークに追加

トラックバックURL

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

コメント

1 - 幽 さん

今回みたいにロゴもメニューもサイズ固定ならうっかり思考停止して、メニューをDivでくくってposition:absolute;width:100%;left:0px;を指定しつつ、nulはwidth:830px;margin:0 auto;にしてulに続くコンテンツはmargin-topで下に逃がしてしまおう‥ってやっちゃいそうです。nご紹介のテクニックはどの段階で出てきた要素にも被さりを気にせず使えるのがポイントですね。必要な時に迷わず「あの技使おう」って思い出せれば最高なんですが、これがなかなか。min-width指定が肝ですね。n分かりやすいご説明なのでこの機会に完全に覚えさせていただきます!n有難う御座いました(。-∀-)ノ

2009年6月17日 19:28

2 - えど Author Profile Pageさん

>>1 - 幽さんどもです(*'-')今回のこのネタ、実はブログ TOP を HTML5 で組みなおしたらどうなるんだろー?nという考えの下、HTML5 で組んでいたときに思いついたものなんですwnできるだけ HTML 側では細工をせずにどうしたら CSS だけで実現できるかなーというのを考えてたときに思いつきました(´ー`)position などよりもコンテンツ容量に応じての高さの変更にも対応できるので今後はなにげに使えるかなーと思ってますwn同様にして footer でも同じような感じで使えますね。

2009年6月17日 20:08