▼EntryMore▼

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

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% くらいの少ない数値だとデュアルディスプレイの人などがブラウザを極端に左右に長くした場合、変なところで切れてしまう、ということがありえます。（まぁそこまでやられたら無視してもいいかもしれませんが・・ｗ）

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

IE6 対策

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

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