ブラウザの上から下まで色をつけたい

ブラウザの上から下まで色をつけたいです。
htmlには

     <div class="menu" id="menu">

            <a class="home" href="">Home</a>
            <a class="profile" href="">Profile</a>

     </div>

と書き、cssには

.menu{
    background-color: gray;
    width: 500px;
    height: auto;
}

と書きました。しかしこれでは

のように上の赤矢印をつけたところに余白ができ、
ブラウザの下いっぱいまでグレーの色がつきません。（今はHome/Profileの部分にだけグレーの色がついている）
ブラウザの上から下まで余白なしでグレーの色をつけたいのですがどう書けばそのようにできますか？

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

回答3件

html要素に背景色を指定すれば良いと思います.

CSS
1html{
2    background-color: gray;
3}

投稿2017/12/23 07:36

defghi1977

総合スコア4756

単純にbodyにbackground-Colorを設定すれば良いような気もしますが・・

投稿2017/12/23 07:36

yambejp

総合スコア114843

ベストアンサー

以下のようにすることで質問者さんの問題は解決すると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        html, body, .menu {
8            height: 100%;
9        }
10
11        body {
12            margin: 0;
13        }
14
15        .menu {
16            background-color: gray;
17            width: 500px;
18        }
19    </style>
20</head>
21<body>
22<div class="menu" id="menu">
23
24    <a class="home" href="">Home</a>
25    <a class="profile" href="">Profile</a>
26
27</div>
28</body>
29</html>