フッターが隠れてしまう

初めまして。
現在CSS及びHTML、JavaScriptなどを用いて自作サイトの作成を行っているものです。

画面を表示させた時に、フッターも一緒に表示させたいのですが、どういうわけか、今のソースコードだと下にスクロールをしなければフッターが確認できない状態になってしまっています。

どこを修正すれば、フッターが下にスクロールをせずとも表示させることができるのか、ご教授いただければ幸いです。
どうぞよろしくお願いいたします。

#私のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5   <meta charset="utf-8">
6   <meta name="robots" content="noindex,nofollow">
7   <title>あああああ</title>
8
9   <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
11   <link rel="stylesheet" href="stylesheet.css">
12
13   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
14   <script>
15   $(function() {
16      const hum = $('#hamburger, .close')
17      const nav = $('.sp-nav')
18      hum.on('click', function(){
19         nav.toggleClass('toggle');
20      });
21   });
22   </script>
23</head>
24<body>
25   <header>
26      <h1>
27         <a href="/">あああああ</a>
28      </h1>
29      <nav class="pc-nav">
30         <ul>
31            <li><a href="#">ABOUT</a></li>
32            <li><a href="#">SERVICE</a></li>
33            <li><a href="#">COMPANY</a></li>
34            <li><a href="#">CONTACT</a></li>
35         </ul>
36      </nav>
37      <nav class="sp-nav">
38         <ul>
39            <li><a href="#">ABOUT</a></li>
40            <li><a href="#">SERVICE</a></li>
41            <li><a href="#">COMPANY</a></li>
42            <li><a href="#">CONTACT</a></li>
43            <li class="close"><span>閉じる</span></li>
44         </ul>
45      </nav>
46      <div id="hamburger">
47         <span></span>
48      </div>
49   </header>
50   <div class="main-visual">
51      <h2>WEB DESIGN <span>IS</span> YOUR FUTURE</h2>
52
53   </div>
54
55   <!-- footer -->
56  <footer>
57    <p>© All rights reserved by あああああ</p>
58  </footer>
59
60</body>
61</html>
62

CSS
1@charset "utf-8";
2* {
3   box-sizing: border-box;
4}
5body {
6   margin: 0;
7   padding: 0;
8   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
9   background-color: #e6e6e6;
10   letter-spacing : 0.2em;
11}
12header {
13   padding: 30px 4% 10px;
14   position: fixed;
15   top: 0;
16   width: 100%;
17   background-color: #fff;
18   display: flex;
19   align-items: center;
20}
21h1 {
22   margin: 0; padding: 0;
23   font-size: 20px;
24}
25a {
26   text-decoration: none;
27   color: #4b4b4b;;
28}
29nav {
30   margin: 0 0 0 auto;
31}
32ul {
33   list-style: none;
34   margin: 0;
35   display: flex;
36}
37li {
38   margin: 0 0 0 15px;
39   font-size: 14px;
40}
41.main-visual {
42   display: flex;
43   justify-content: center;
44   align-items: center;
45   height: 100vh;
46   background: url('main_visual.jpg') top center / cover no-repeat;
47}
48h2 {
49   margin: 0;
50   font-size: 30px;
51   font-weight: normal;
52   color: #fff;
53}
54
55.sp-nav {
56   display: none;
57}
58
59@media screen and (max-width: 640px) {
60   .pc-nav {
61      display: none;
62   }
63   .sp-nav {
64      z-index: 1;
65      position: fixed;
66      top: 0;
67      left: 0;
68      width: 100%;
69      height: 100vh;
70      display: block;
71      width: 100%;
72      background: rgba(0, 0, 0, .8);
73      opacity: 0;
74      transform: translateY(-100%);
75      transition: all .2s ease-in-out;
76   }
77   #hamburger {
78      position: relative;
79      display: block;
80      width: 30px;
81      height: 25px;
82      margin: 0 0 0 auto;
83   }
84   #hamburger span {
85      position: absolute;
86      top: 50%;
87      left: 0;
88      display: block;
89      width: 100%;
90      height: 2px;
91      background-color: #fff;
92      transform: translateY(-50%);
93   }
94   #hamburger::before {
95      content: '';
96      display: block;
97      position: absolute;
98      top: 0;
99      left: 0;
100      width: 100%;
101      height: 2px;
102      background-color: #fff;
103   }
104   #hamburger::after {
105      content: '';
106      display: block;
107      position: absolute;
108      bottom: 0;
109      left: 0;
110      width: 70%;
111      height: 2px;
112      background-color: #fff;
113   }
114   /*スマホメニュー*/
115   .sp-nav ul {
116      padding: 0;
117      display: flex;
118      flex-direction: column;
119      justify-content: center;
120      align-items: center;
121      height: 100%;
122   }
123   .sp-nav li {
124      margin: 0;
125      padding: 0;
126   }
127   .sp-nav li span {
128      font-size: 15px;
129      color: #fff;
130   }
131   .sp-nav li a, .sp-nav li span {
132      display: block;
133      padding: 20px 0;
134   }
135   /*-閉じるアイコンー*/
136   .sp-nav .close {
137      position: relative;
138      padding-left: 20px;
139   }
140   .sp-nav .close::before {
141      content: '';
142      position: absolute;
143      top: 50%;
144      left: 0;
145      display: block;
146      width: 16px;
147      height: 1px;
148      background: #fff;
149      transform: rotate( 45deg );
150   }
151   .sp-nav .close::after {
152      content: '';
153      position: absolute;
154      top: 50%;
155      left: 0;
156      display: block;
157      width: 16px;
158      height: 1px;
159      background: #fff;
160      transform: rotate( -45deg );
161   }
162   .toggle {
163      transform: translateY( 0 );
164      opacity: 1;
165   }
166   .main-visual {
167      padding: 0 4%;
168   }
169   h2 {
170      line-height: 1.6;
171      text-align: center;
172   }
173}
174
175footer {
176  width: 100%;
177  height: 80px;
178  text-align: center;
179  padding: 30px 0;
180  background-color: #cab64a;
181}
182.footer-text {
183  color: #fff;
184}
185

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

回答1件

ベストアンサー

問題があるのはここです。フッターの高さが80px
mainの高さが100vhなので画面の高さからフッター分の80pxはみ出しているので
こうなっています。なのでheightをheight: calc(100vh - 80px);
などすることで、基本的にはちゃんと表示されます。

css
1        .main-visual {
2            height: 100vh;
3        }

投稿2020/07/24 11:13

Jon_do

総合スコア1373

ypk

2020/07/24 21:34

heightをheight: calc(100vh - 80px); にしてみたところ、無事に解決がされました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

フッターが隠れてしまう

関連した質問