CSSで背景やボーダー（枠線）をページの一番下まで表示
2009/06/28 Sun [Edit]
CSS で div 要素の高さ（height）を 100% にしてブラウザ・ウィンドウの高さ一杯（ページ一杯）に背景色（background-color）やボーダー（border）を適用させるための Tips。
ページ内のコンテンツが少なく、でも背景やボーダー（枠線）はページの一番下まで表示させたい時がありますよね。
デザインにもよると思いますが、必要なモノが足りていないのは寸足らずのパンツのように格好良いモノではありません。
ビジネスマン（営業マン）のスーツが七分丈では、まとまる商談もこじれてしまう可能性だってあります。
七分丈ならまだしも、膝小僧丸出しの、わんぱくそうなビジネスマンに大きな仕事を任せられるでしょうか？
そのビジネスマンが一見わんぱくそうに見えて、実は仕事は滅茶苦茶出来る方だったとしても、ホットパンツでは出世も遅れるはずです。
外見より中身が重要なのは、人もWebページも一緒だと思うのですが、外見だって大切だと思うのです。
このページをご覧頂いている方には、どうか商談中にホットパンツの端から金の玉をチラつかせるようなわんぱく過ぎるビジネスマン、もとい寸足らずな Web ページを作らない Web 制作者であって欲しいと切に願っています。
コンテンツ量に関わらず、ブラウザ・ウィンドウの下まで、しっかりと背景や罫線を表示させたい方は続きをどうぞ。
以下、必要なソースです。（標準準拠モード用）
html , body {height:100%;}
body > #container {height:auto;}
#container {
height:100%;/* for IE6 */
min-height:100%;
background-color:#fff;
border:solid #ccc;
border-width:0 1px;
}
簡単に解説を加えると、html 要素と body 要素の height プロパティを 100% とし、高さをブラウザ・ウィンドウの表示領域一杯と指定します。
次に背景やボーダーを指定したブロック要素、上のソースの場合は #container の min-height プロパティも 100% とし、高さの最小値を表示領域一杯と指定します。
最小値で高さを指定するのは height プロパティで指定しまうと、初期の表示領域一杯を越え、ブラウザのスクロールバーが表示されるような時に、高さが追従しない為です。
しかし上のソースで、height プロパティも 100% としてあるのは、IE6 のためです。
IE6 は初期の表示領域一杯を越え、スクロールバーが表示されるような時も、高さが追従します。
通常、内包する要素の高さに常に追従させるには height プロパティに auto を指定します。
なので IE6 以外のモダンブラウザへの指定として、IE6 非対応の子供セレクタを使い、height プロパティに auto を指定しています。
body > #container {height:auto;}
上のソースがその部分だけを取り出したソースです。
今回の方法以外にも、body 要素の background プロパティで、画像を縦方向に繰り返す（repeat-y）方法でも背景をページの下迄表示させることは可能です。
しかし、画像を使わずに済ませられるような単純なデザインでしたら、使わない方がスマートだと思えますし、多少なりとも作業スピードの向上に繋がるのではないでしょうか。
Comments
Track Backs
TB URL
で良いと思うに一票。
