- ベストアンサー
フッター固定時のdivの背景について
- フッターを固定するためのHTMLを作成しましたが、コンテンツが少ない場合に背景が途切れてしまいます。
- コンテンツの量に関係なく、背景を下まで表示させる方法について教えてください。
- フッター固定時のdivの背景の表示に問題があります。対処方法を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
bodyに背景を指定しましょう。 あるいは、他の大きな要素に・・ 「フッターを画面下部に固定するため以下のようなHTMLを書きました。」 とても大事なことなので、これは間違いです。HTMLはデザインのことは考えません。HTMLは文書構造をマークアップするもので、その文書構造を利用してスタイルシートを書きます。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 たとえば、HTMLが <body> <div class="header" id="TOP"> <h1>タイトル</h2> </div> <div class="section"> </div> <div class="footer"> <h2>footer</h2> </div> </body> の場合・・・ ・class名は、文書構造を示すもの、HTML5の要素名に変えてあります。 <div class="header">→<header> <div class="section">→<section> CSS <!-- html, body {margin: 0;padding: 0;height:100%;} div.header,div.section{margin:0 auto;} div.header{ position:absolute;top:0; width:100%;height:100px; text-align:center; background-color:yellow; } div.header h1{margin:0;} div.section{ width:50%; height:100%; background-color:rgb(240,230,140);/* 注 */ } div.footer { height: 100px;width:100%; position: absolute; bottom: 0; background-color: #7EC4E6; } ★色名キーワードとして使えるのはaqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellowの 16のみです。(orangeはCSS2.1で登場し、CSS3でなくなった?)
お礼
ありがとうございました。 また、お礼が遅れてしまい申し訳ありませんでした。 インフルエンザにかかってしまい・・・。 ＞とても大事なことなので、これは間違いです。・・・ 参考になりました。ありがとうございます。