フッターの下の余白を無くしたいです。

実現したいこと

フッターの下の余白を無くしたいです。

発生している問題・分からないこと

フッターの下の余白を無くしたいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="description" content="株式会社TKG会社店舗紹介">
6        <link rel="stylesheet" href="../style.css">
7        <title>店舗紹介</title>
8    </head>
9    <body>
10        <div id="contents">
11        <header>
12            <h1>店舗紹介</h1>
13            <nav id="global_navi">
14                <ul>
15                    <li><a href="../index.html" target="_blank">トップページ</a></li>
16                    <li><a href="../company/index.html" target="_blank">会社概要</a></li>
17                    <li><a href="index.html">店舗紹介</a></li>
18                </ul>
19            </nav>
20        </header>
21        <main>
22            <div>
23                <h2>豊橋本店</h2>
24                <table border="1">
25                    <tr>
26                        <th>住所</th>
27                        <td>〒440-1105 愛知県豊橋市鶉羽町1-10-5</td>
28                    </tr>
29                    <tr>
30                        <th>電話番号</th>
31                        <td>0532-01-4105</td>
32                    </tr>
33                </table>
34            </div>
35            <div>
36                <h2>名古屋店</h2>
37                <table border="1">
38                    <tr>
39                        <th>住所</th>
40                        <td>〒450-1105 愛知県名古屋市鶏山区風見鶏町1-10-5</td>
41                    </tr>
42                    <tr>
43                        <th>電話番号</th>
44                        <td>052-000-1105</td>
45                    </tr>
46                </table>
47            </div>
48        </main>
49        <footer>
50            <dl>
51                <dt>本社所在地</dt>
52                <dd>〒440-1105 愛知県豊橋市鶉羽町1-10-5</dd>
53                <dt>電話番号</dt>
54                <dd>0532-01-4105</dd>
55            </dl>
56        </footer>
57        </div>
58    </body>
59</html>

CSS
1@charset "UTF-8";
2/* body */
3body,html {
4    height: 100%;
5    margin: 0;
6    padding: 0;
7}
8#contents {
9margin: 0 auto;
10    width: 100%;
11    position: relative;
12    min-height: 100%;
13  }
14
15/* header */
16header {
17    background-color: blue;
18    margin: 0;
19}
20h1 {
21    color: white;
22    margin: 0;
23}
24/* グローバルナビゲーション */
25#global_navi ul {
26    list-style-type: none;
27    display: flex;
28    margin: 0;
29    padding: 0;
30
31}
32#global_navi ul li {
33    margin: 0 10px;
34}
35#global_navi ul a {
36    display: block;
37    padding: 6px 20px;
38    border-radius: 9999px;
39    border: 3px outset white;
40    text-decoration: none;
41    background-color: aqua;
42}
43
44/* main */
45/* 画像の大きさ指定 */
46img {
47    width: 600px;
48    height: auto;
49}
50/* div間の余白を指定 */
51div {
52    margin: 50px 0;
53    width: 850px;
54}
55
56/* footer */
57footer {
58    color: white;
59    background-color: blue;
60    margin: 0;
61}
62dl {
63    margin: 0;
64}
65dt {
66    float: left;
67    clear: left;
68    margin-right: 20px;
69}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ヘッダーの上の余白は、
#contents {margin: 0 auto;}
で無くなりました。
また、以下の二種類の方法を試しましたができませんでした。
リンク内容
 リンク内容

補足

特になし

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

回答1件

ベストアンサー

2つ目のリンク先の方法でできました。

css
1#contents {
2  margin: 0 auto;
3  width: 100%;
4  display: grid;
5  grid-template-rows: auto 1fr auto;
6  grid-template-columns: 100%;
7  min-height: 100vh;
8}