footerの下に余白があく

###前提・実現したいこと
footerの下に余白があく。余白を0pxもあかないようにしたい。

###発生している問題・エラーメッセージ
特にエラーは発生していない。

###該当のソースコード
htmlには

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>

  <header class="clearfix">
     <nav>
      <h1 class="title">WEB SITE</h1>
      <ul class="top-menu">
            <li class="top-menu-item"><a class="button-primary" href="/accounts/login">LOGIN</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div class="container">
　　 <div class="col-lg-6 col-md-12"> 
    <p>Hello world</p>
    </div>
    </div>
  </main>

  </body>
　<footer>
    <nav>
      <ul class="bottom-menu">
            <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約</a></li>
      </ul>
    </nav>
  </footer>
</html>

と書いた。
index.cssには

*{
    margin: 0;
    padding: 0;
}

header{
    height: 100px;
    background-color: black;
}

footer{
    height: 50px;
    width: 100%;
    background-color: black;
    bottom:0;
}

.bottom-menu-item{
    list-style: none;
    font-size: 15px;
}
.bottom_index {
    color: white;
}

と書いた。

###試したこと
cssのfooterタグに

footer{
    height: 50px;
    width: 100%;
    background-color: black;
　  position:absolute;
    bottom:0;
}

と書いたが、フッターがbodyの場所に行き逆に変な位置に移動した。

Lhankor_Mhy

2017/10/13 10:06

当方で試したところ、隙間が開かず問題が再現しませんでした。ここでいう「隙間」とは、何と何との間の隙間のことですか？　もしかしてfooterとwindow枠との間の隙間ですか？

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

回答3件

footerもbodyの中に入れましょう

追記
ウィンドウの一番下についてほしいのだと仮定して

css
1　  position:absolute;

提示のfooterのcssですが、一番はじめが全角スペースです。
HTMLにも変なスペースや文字コード（？）が入ってます。
エディターによっては見えなかったり文字化けしてたりします。
teratail上ではわかりづらい部分です。

投稿2017/10/13 08:29

編集2017/10/13 14:48

dit.

総合スコア3235

abc30

2017/10/13 08:38

それでも隙間が空いたのですが、どうすればいいでしょうか？

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

ベストアンサー

以下のようにすると質問者さんの想像していることが実現できると思いますが、いかがでしょうか？

HTML
1<html lang="ja">
2<head>
3    <meta charset="utf-8">
4    <title>タイトル</title>
5    <style type="text/css">
6        * {
7            margin: 0;
8            padding: 0;
9        }
10
11        header {
12            height: 100px;
13            background-color: black;
14        }
15
16        footer {
17            height: 50px;
18            width: 100%;
19            background-color: black;
20            position: absolute;
21            bottom: 0;
22        }
23
24        .bottom-menu-item {
25            list-style: none;
26            font-size: 15px;
27        }
28
29        .bottom_index {
30            color: white;
31        }
32    </style>
33</head>
34<body>
35<header class="clearfix">
36    <nav>
37        <h1 class="title">WEB SITE</h1>
38        <ul class="top-menu">
39            <li class="top-menu-item"><a class="button-primary" href="/accounts/login">LOGIN</a></li>
40        </ul>
41    </nav>
42</header>
43
44<main>
45    <div class="container">
46        <div class="col-lg-6 col-md-12"> 
47            <p>Hello world</p>
48        </div>
49    </div>
50</main>
51<footer>
52    <nav>
53        <ul class="bottom-menu">
54            <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約</a></li>
55        </ul>
56    </nav>
57</footer>
58</body>
59</html>