横幅が 100% の header を ~inner を使わずに実現する

概要

Web ページのデザインで、ヘッダ部分やフッタ部分の横幅がウィンドウに対して100% になっているとき、~inner のような不要な div を使わないでこれを実現する方法です。

動作確認用の demo

構造

動作確認用の demo のページの構造は

body 要素
- div#document
  - div#header
  - div#content
  - div#footer

となっています。

HTML のソースコード

動作確認用の demo の HTML のソースコードは最小限で抜き出すと

<body>
<div id="document">
<div id="header">ヘッダ領域</div>
<div id="content">コンテント領域</div>
<div id="footer">フッタ領域</div>
</div>
</body>

となっています。

CSS のソースコード

Firefox, Opera, Safari など用

動作確認用の demo の CSS のソースコードから、Firefox, Opera, Safari など IE 6, 7 を除く Web ブラウザ向けのもののみを取り出すと

#document{
min-width:800px;
overflow:hidden;
}

#header{
position:relative;
left:50%;
padding:0 5000px;
margin-left:-5400px; /* ( padding-left + width / 2 ) */
width:800px;
}

#content{
margin:0 auto;
width:800px;
}

#footer{
position:relative;
left:50%;
padding:0 5000px;
margin-left:-5400px; /* ( padding-left + width / 2 ) */
width:800px;
}

が該当します。

#document に適用されるのスタイルについて

横幅がウィンドウのサイズより広かった場合はoverflow:hidden;により切り取る。
ウィンドウのサイズがコンテンツの幅 (動作確認用の demo では 800px) 以下になった場合には横スクロールバーが出るようにするためにmin-width:コンテンツ幅px;を設定する。

#header, #footer に適用されるのスタイルについて

左右に大きな値のpaddingを設定する。(動作確認用の demo では padding:0 5000px;)
position:relative;とleft:50%;で常にウィンドウサイズの50%を始点にする。
ウィンドウサイズの50%を始点が始点なので、左padding(動作確認用の demo では5000px)とコンテンツ幅の半分(動作確認用の demo では400px (800/2) ) だけ左marginをマイナスに設定する(動作確認用の demo では-5400px)

#content に適用されるスタイルについて

常に中央に表示されるようにmargin:0 auto;とwidthを設定する

IE 6, 7用

後日追記します。

動作確認状況

Windows IE 6, 7
Windows Firefox 2
Windows Opera 9.2
Windows Safari 3.1

で意図したとおりにレンダリングされることを確認しました。

この方法を応用すると、左右非対称なレイアウトのようなこともできます。

トラックバックURI

http://www.yomotsu.net/lab/css/fullwidthheader/trackback

コバさんからのコメント

2008年5月12日 20:50

ほー、こんな使い方もあるものですねー。
メモメモ。

hirasawaさんからのコメント

2008年6月30日 23:40

どもー

この方法がとっても素敵なんだけど、IE（7だけかな）で、
適当な場所をクリックしてドラッグしていくと、横にズレていってしまうんですよね。

自分なりに色々試したんですが、解決出来る見込みがなかったっす…

adminさんからのコメント

2008年7月1日 9:14

ひらっち

まじだ!!気づかなかったです。確かに IE 6 では大丈夫だけど IE 7 でスクロールしてました。

面白そうなので自分も考えてみますねー。で、ダメそうだったら注意書き追加しておきます

コメントありがとー

adminさんからのコメント

2008年7月1日 13:55

ひらっち

ドラッグするとずれていく点、解消したみたいです。とりあえず、demo を更新しておきました。後で説明なども合わせて更新しますね。

またなにかあったらコメントいただけるとたすかります。

ひらっちさんからのコメント

2008年7月1日 15:24

対応早いっ！！なおってるー！

webruaryさんからのコメント

2008年7月4日 18:12

テンプレートのが2つ減りました。…

先日、テンプレートをぷち修正して<div>を2つ減らすことが出来ました。わーい∩(・∀・)∩修正した内容はヨモツネットさんの『横幅が……

itoriさんからのコメント

2008年7月15日 13:15

いつも参考にさせてもらってます。
このdemoですが、IE7ではheaderとfooterのテキストがプリントされないみたいですね。背景は出てるんですけど。

adminさんからのコメント

2008年7月16日 1:51

itori さん

はじめまして。コメントありがとうございます。

プリントの問題、確認してみましたら確かに header と footer の内容がマイナス方向 (左) に飛んでしまっているようです。

現段階では、 @media print で調整するするなどの対策をするのが手っ取り早そうですが、時間ができましたらもっと詳しく見てみたいと思います。

ご指摘ありがとうございました。

コメントフォーム

実験室に戻る

このページの目次