フッターが現在の画面の最下に表示されない問題について

現在アプリの見た目の部分を作成しているのですが、フッターが、少しスクロールしないと見えない状態になっていて困っています。
一番下のOffece系ボタンとフッターの間は空間的には余裕なのでスクロールしなくても表示させたいです。
現状のコードと画面は以下の通りです。
アドバイス等お願い致します。

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="">
6    <meta name="keywords" content="">
7
8    <!-- 画面サイズの調整 -->
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
11    <title>固定費管理アプリ</title>
12
13    <!-- CSS -->
14    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
15    <link rel="stylesheet" href="../css/style.css">
16  </head>
17
18
19  <body>
20    <class class="wrapper">
21      <h1 class="center title">固定費管理アプリ</h1>
22      <p class="center month_fixed_cost">月の固定費</p>
23      <div class="center fixed_cost"><span>0</span>円</div>
24
25        <div class="container">
26          <button type="button" class="tmp buttons"><font size='4'>家賃</font><div>80,000<span>円</span></div></button>
27          <button type="button" class="tmp buttons"><font size='4'>光熱費</font><div>5,000<span>円</span></div></button>
28          <button type="button" class="tmp buttons"><font size='4'>水道代</font><div>5,000<span>円</span></div></button>
29          <button type="button" class="tmp buttons"><font size='4'>通信費</font><div>5,000<span>円</span></div></button>
30          <button type="button" class="tmp buttons"><font size='4'>食費</font><div>40,000<span>円</span></div></button>
31          <button type="button" class="tmp buttons"><font size='4'>音楽</font><div>1,000<span>円</span></div></button>
32          <button type="button" class="tmp buttons"><font size='4'>Offce系</font><div>1,000<span>円</span></div></button>
33        </div>
34      </class>
35
36      <footer>
37          <p class="center">(C) 2020</p>
38      </footer>
39  </wrapper>
40  </body>
41
42</html>

CSS
1@charset "UTF-8";
2
3/* 表示関係 */
4.wrapper {
5  background-color: #9A9A9A;
6  display: flex;
7  flex-direction: column;
8  min-height: 100vh;
9  overflow: hidden;
10}
11footer {
12  width: 100%;
13  margin-top: auto;
14  font-size: 8px;
15  background-color: #909090;
16  border-top: solid 1px #707070;
17  padding: 3px;
18}
19.center {
20  font-family:"ヒラギノ角ゴシック", "sans-serif";
21  text-align: center;
22}
23.title {
24  font-size: 50px;
25  font-weight: 400;
26  margin: 35px auto 90px;
27}
28.month_fixed_cost {
29  font-size: 25px;
30  font-weight: 300;
31  margin: 0 auto;
32}
33.fixed_cost {
34  font-size: 45px;
35  font-weight: 300;
36  margin: 15px auto 150px;
37}
38
39/* ボタン関係 */
40.container {
41  display: flex;
42  flex-direction: row;
43  flex-wrap: wrap;
44  justify-content: space-around;
45  text-align: center;
46  margin-bottom: 20px;
47}
48.buttons {
49  background-color: #CECECE;
50  border: solid 1px #707070;
51  border-radius: 30px;
52  height: 65px;
53  width: 180px;
54  outline: none;
55  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
56  transform: translateY(-0.1em);
57  margin: 20px 30px;
58}
59button:hover {
60  box-shadow: none;
61  transform: translateY(0);
62}

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

回答1件

ベストアンサー

classやwrapperという要素はありませんし、開始タグと終了タグのバランスも崩れています。
div要素にwrapperクラスを指定し、footer要素までを含めるようにすれば、お望み通りの表示になります。

あと、HTML5なのにfont要素を使ってはいけませんね。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="">
6    <meta name="keywords" content="">
7
8    <!-- 画面サイズの調整 -->
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
11    <title>固定費管理アプリ</title>
12
13    <!-- CSS -->
14    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
15    <link rel="stylesheet" href="../css/style.css">
16  </head>
17
18
19  <body>
20    <div class="wrapper">
21      <h1 class="center title">固定費管理アプリ</h1>
22      <p class="center month_fixed_cost">月の固定費</p>
23      <div class="center fixed_cost"><span>0</span>円</div>
24
25      <div class="container">
26        <button type="button" class="tmp buttons">
27          家賃<br>80,000<span>円</span>
28        </button>
29        <button type="button" class="tmp buttons">
30          光熱費<br>5,000<span>円</span>
31        </button>
32        <button type="button" class="tmp buttons">
33          水道代<br>5,000<span>円</span>
34        </button>
35        <button type="button" class="tmp buttons">
36          通信費<br>5,000<span>円</span>
37        </button>
38        <button type="button" class="tmp buttons">
39          食費<br>40,000<span>円</span>
40        </button>
41        <button type="button" class="tmp buttons">
42          音楽<br>1,000<span>円</span>
43        </button>
44        <button type="button" class="tmp buttons">
45          Offce系<br>1,000<span>円</span>
46        </button>
47      </div>
48
49      <footer>
50        <p class="center">&copy; 2020</p>
51      </footer>
52    </div>
53  </body>
54
55</html>