CSSのhtml要素？への背景色の指定について

こんにちは

ある程度は調べたのですがいかんせん初心者ですので解決できませんでした。
そこで２点質問させていただきます。

1、CSSの「background-color」がうまくいきません。
まずはソースをご覧ください。

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <link rel="stylesheet" type="text/css" href="style.css">
6        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
7        <title>Title</title>
8    </head>
9    <body>
10        <div id="header">
11            <h1>Title</h1>
12        </div>
13        <div id="container">
14            
15        </div>
16    </body>
17</html>

CSS
1html{
2    height: 100%;
3    background-color: #F1F1F1;
4}
5
6body{
7    font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
8    font-size: 16px;
9    color: #111111;
10    height: 100%;
11}
12
13    body > #container{
14        height: auto;
15    }
16
17#header{
18    height: 64px;
19    background-color: white;
20}
21
22    h1{
23        text-align: center;
24        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
25    }
26    body h1{
27        font-size: 64px;
28    }
29
30#container{
31    margin: 0 auto;
32    min-height: 100%;
33    height: 100%;
34    width: 888px;
35    background-color: white;
36    box-shadow: 4px 0 3px -4px rgba(0, 0, 0, 0.5), -4px 0 3px -4px rgba(0, 0, 0, 0.5);
37}

このようにhtmlに対して背景色を指定したのですが、色が変わりません。

どのようにすればhtmlに対して背景色を指定できるでしょうか？

(ちなみにbodyに対しては設定できましたができればhtmlに対して指定したいです。)

2、

”１”が解決できない場合のみお答えください。

まずはスクリーンショットをご覧ください。

”１”で対症療法的にbodyに対して背景を指定したので(灰色のところです)ページの一番下に白い部分ができてしまいました。

下まで背景色を指定するにはどうすればいいですか？

お手数おかけしますがお答えいただけたら幸いに存じます。

行動規範の内容に同意します

回答3件

ベストアンサー

下に白い余白ができるのは、body が高さ 100% なのに、その内側の #container に min-height: 100% があり、さらに header もあるので body より中身のサイズが大きいからです。
body の 100% 消せば下まで色が来ますよ。

投稿2016/08/25 16:45

編集2016/08/25 16:46

lazex

総合スコア604

Kelvin

2016/08/26 01:14

bodyの"height:100%"を消してbodyからhtmlに"background-color"を移したらできました! ありがとうございます！

MIURA_Yasuyuki

2016/08/26 21:10

なるほど。

行動規範の内容に同意します

リセットが先。

HTML
1<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
2<link rel="stylesheet" type="text/css" href="style.css">

投稿2016/08/25 16:18

kei344

総合スコア69400

Kelvin

2016/08/26 00:15

そうでした！忘れてましたありがとうございます。

行動規範の内容に同意します

htmlをCSSで修飾出来るかは分かりませんでした。

chromeのデベロッパーツールで見てみたのですが、
div#containerがbodyを突き破っているみたいです。
( 気にしている白い部分はbody領域となっていない。 )

色々やりようはやるのだと思いますが、とりあえず以下でやりたい事は出来ていると思います。

CSS
1html{
2    height: 100%;
3}
4
5body{
6    font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
7    font-size: 16px;
8    color: #111111;
9    height: 1000px; /* bodyのheightを固定 */
10    background-color: #F1F1F1; /* htmlから移動 */
11}
12/* 中略 */
13#container{
14    margin: 0 auto;
15    min-height: 936px; /* 1000(body) - 64(header) */
16    height: 936px; /* 1000(body) - 64(header) */
17    width: 888px;
18    background-color: white;
19    box-shadow: 4px 0 3px -4px rgba(0, 0, 0, 0.5), -4px 0 3px -4px rgba(0, 0, 0, 0.5);
20}