フッターの背景に色を指定したいのですが、

フッターの背景に色を指定したいのですが、

下記内容でフッターを記述し、
"#"には任意の画像またはテキスト等を指定しています。
<div id="footer">
<img src="#" />
</div>

CSSで
footerにheight:100%;や、
height:autoを試しましたが無理でした。

下記サイトのような感じで、ブラウザの一番下までフッターの背景の色を指定したいのですが、教えていただけないでしょうか？
宜しくお願いいたします。

http://www.nattoku.jp/
http://www.lets-co.com/

No.2 ベストアンサー 回答者： abril 回答日時： 2010/06/05 20:29

http://www.nattoku.jp/
こちらのサイトは、「ブラウザの一番下までフッターの背景の色」が指定されているのではありません。フッター部分の背景の黒はbodyのbackgroundに指定されておりフッター部分には何も指定されていなので、単純にフッターのボリュームに関わらずbodyの背景色が見えているだけです。

http://www.lets-co.com/
こちらはフッター部分の背景色の黒っぽい色は#foter_wrapにbackground-colorとして指定されていますが、フッターのボリュームがある事と、padding-bottomを多めにとっている為に、「ブラウザの一番下までフッターの背景の色」がある様に見えていますが、仮にフッターやメインのコンテンツのボリュームが少なく、スクロールが発生しない状態になれば、フッターの描画が終わった残りの画面領域には違う背景色が見える事になるかと。

> footerにheight:100%;や、height:autoを試しましたが無理でした。

heightの100%やautoという値は、一体「どの高さに対しての100%やautoを示しているのか」という事を考えてみなければなりません。おそらく、ウィンドウの表示領域に対してフッター以外のコンテンツの描画が終わった残り全部、という感覚で100%とかを指定されている様に思いますが、あいにくブラウザ側では判断材料不足ですのでその様な解釈はしてくれません。ですので、この場合は単にfooterの内包する要素のボリュームに依存したまま描画領域は終わってしまいます。

まずfooterを内包する適切な親要素の高さが画面の表示領域に対して一杯（100%）になる様に指定してある事が前提です。具体的な方法は"height: 100%;"とかのキーワードでググればたくさんヒットすると思いますが、例えば下記などをご覧になってみて下さい。
【参考】http://connecre.com/connelog/connelog00000026.php

もしもフッター部分の背景は画面の横幅一杯に描画されても良いというレイアウトでしたらheightの指定なしでもOKなとても簡単な方法もあります。
http://css-happylife.com/log/css-template/000718 …

上記のhtml要素にフッター部分で表示したい背景を指定するという方法、を見た時には目から鱗でした。

この手の質問も頻繁に出てくるところを見ると、やはりwidthよりheightの概念の方がわかりにくく正しい認識が浸透していないのだろうな、と感じます。ちなみに、上記のサイトの作者の方がCSSビギナー向けに新たに始めた「CSS HappyLife ZERO」というサイトは、これから正しいCSSの知識を習得して行こうとする方に大変役に立つ内容だと思います。確かにCSSにしてもHTMLにしてもまずは仕様書を読み都度確認するのが大前提なのですが、技術系の文章にありがちでとかく初心者にはなかなかすんなりわかりづらい表現が多かったりするの事実ですので、その点でもこちらのサイトはとてもわかりやすく使い勝手も良いのでお勧めです。

この回答へのお礼

非常に丁寧にお答えいただきありがとうございます。
分かりやすく助かりました。
ありがとうございました。

お礼日時：2010/06/07 12:28

No.3 回答者： rurino 回答日時： 2010/06/05 21:05

念のためにの確認なのですが、CSSの冒頭に

* { margin: 0; Padding: 0; }

を設定されていますでしょうか。
ブラウザの初期値にはある程度の余白（margin、padding）が設定されています。
これを入れておかないと、隅まで色が行き渡りません。

この回答へのお礼

いろいろ試して見たいと思います。

お礼日時：2010/06/07 12:30

No.1 回答者： noname#119957 回答日時： 2010/06/05 17:35

■単に、高さが高いので、最後まで表示されるのではありませんか？

■もしも、上下ＦＵＬＬサイズで背景を入れたいなら、ＣＳＳで簡単にできます。

一番外側に、wrapperを配置して背景を黒にして、高さ100％で、左右マージンＡＵＴＯ
上下マージン０ｐｘ　とすれば、上下方向にはブラウザ一杯で、左右にはセンタリングされた、黒い枠が作成されます。

この中に、背景が白いメニューとコンテンツのDIVを入れれば、ご希望道理のものになります。色は適当に指定すればいいと思います。

この回答への補足

ありがとうございます。
単に、高さが高いので、最後まで表示されるのではありません。

教えていただいたようにやってみたのですが、
その場合bodyの一番上に画像を配置していますので消えてしまいます。

補足日時：2010/06/05 19:43