フッター固定時のdivの背景について

解決済

質問者：editbooth
質問日時：2012/01/23 20:10
回答数：1件

フッターを画面下部に固定するため以下のようなHTMLを書きました。
フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。
コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？

<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="screen">
<div id="contents">
コンテンツ
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/01/23 23:58

bodyに背景を指定しましょう。

あるいは、他の大きな要素に・・
「フッターを画面下部に固定するため以下のようなHTMLを書きました。」
　とても大事なことなので、これは間違いです。HTMLはデザインのことは考えません。HTMLは文書構造をマークアップするもので、その文書構造を利用してスタイルシートを書きます。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

たとえば、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でなくなった?)