footer固定に伴う余白の発生原因について

HTML,CSSのコーディングでフッターの上に余白ができてしまうのを解消

HP作成の課題で、フッターをposition:fixed;で一番下に固定したところ、
フッターの上に余白ができてしまう原因がわかりません。

全体のソースコード

HTML
1<body>
2
3    <header>
4        <p>&nbspHTML,IT</p>
5    </header>
6    <main>
7        <div class="top">
8            <a href="information.html">AAA</a><span class="partition">|</span>
9            <a href="connector.html">BBB</a><span class="partition">|</span>
10            <a href="language.html">CCC</a><span class="partition">|</span>
11            <a href="browser.html">DDD、OS</a><span class="partition">|</span>
12            <a href="extension.html">EEE</a><span class="partition">|</span>
13            <a href="attack.html">FFF</a>
14        </div>
15        <div class="bottom">
16            <div class="content">
17                <div class="box2">
18                    <p>このサイトを全く同じように<span class="html">html</span>と<span class="css">css</span>でコーディングしてください。</p>
19                </div>
20            </div>
21        </div>
22    </main>
23    <footer>
24        <p>XXX Inc.</p>
25    </footer>
26</body>

css
1/* html, body{
2    height:100%;
3    margin:0;
4} */
5
6header{
7    background-color: rgba(242,242,242);
8}
9
10header p{
11    color:black;
12    line-height: 100px;
13    font-size: 40px;
14    margin:0px;
15}
16
17.top{
18    background-color: rgba(159,203,218);
19    color:black;
20    text-align: right;
21    width: 100%;
22    height:auto;
23}
24
25.top a{
26    display:inline-block;
27    text-align: center;
28    width:15%;
29    line-height: 50px;
30}
31
32.partition{
33    color:white;
34    font-size: large;
35    line-height: 50px;
36}
37
38/* .main{
39    height:100%;
40} */
41
42.top a{
43    color:black;
44    text-decoration: none;
45}
46
47.bottom{
48    background-color: rgba(242,242,242);
49    color:black;
50    padding:60px 30px;
51}
52
53.box2 {
54    padding: 0.5em 1em;
55    /* margin: 2em 0; */
56    font-weight: bold;
57    background: #FFF;
58    border: solid 3px rgba(246, 193, 66);/*線*/
59    border-radius: 30px;/*角の丸み*/
60    text-align: center;
61}
62.box2 p {
63    margin: 0; 
64    padding: 0;
65    line-height: 70px;
66}
67
68
69.html{
70    color:red;
71}
72
73.css{
74    color:blue;
75}
76
77footer{
78    position: fixed;
79    bottom:0px;
80    width: 100%;
81}
82
83footer p{
84    background-color: rgba(73,132,152);
85    color:white;
86    height:50px;
87    line-height: 50px;
88    text-align: center;
89    margin:0px;
90}
91
92

目標

ウィンドウサイズで高さが変わった時に、topクラスとfooterの間をbottomクラスの幅を変化させ埋めるようにしたいです。
とても汚いコードになっていると思いますが、よろしくお願いします。

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

回答1件

ベストアンサー

フッターの上に余白ができてしまう原因は、html 要素の高さが足りない状態で、footerが固定配置で最下部に固定されているからで、足りない分が空白になっています。

ページ内のコンテンツが増えてきて、高さが自然に viewport よりも大きくなれば問題ないですが、今の状態ではコンテンツがないので、htmlとbodyの高さを指定してあげる必要があります。

また、空白領域の高さをウィンドウサイズが変わっても柔軟に埋めたい場合は、絶対配置よりも Flexbox を使うとシンプルに実装できて対応しやすいと思いました。
flex - CSS MDN

レイアウトに関する HTML が以下の構造だと思うので、

html
1<body>
2  <header></header>
3  <main>
4   <div class="bottom"></div>
5  </main>
6  <footer></footer>
7</body>

こんな感じの CSS でいけると思います。

css
1* {
2  box-sizing: border-box;
3}
4
5html,
6body {
7  height: 100%;
8  margin: 0;
9}
10
11// Layout
12body {
13  display: flex;
14  flex-flow: column;
15  justify-content: space-between;
16}
17
18main {
19  flex: 1;
20}
21
22.bottom {
23  background-color: rgb(242, 242, 242);
24  color: black;
25  padding: 60px 30px;
26  height: 100%; // 追加しました。
27}
28
29// footerのスタイルは削除しました。
30/* footer {
31  position: fixed;
32  bottom: 0px;
33  width: 100%;
34} /*