フッターが移動してしまう

フッターをページの一番下に固定させたいのですが、縮小するとフッターの下に余白が出来てしまいます
下に固定,フッターの下に余白が出来ないようにするにはどうすればいいのでしょうか？

html
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <meta charset="UTF-8">
6    <title>Home</title>
7    <link rel="icon" href="logo.jpg" type="image/x-icon">
8    <link rel="stylesheet" href="style.css">
9  </head>
10
11  <body>
12
13    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
14    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
15
16    <div class="footer">
17      <div class="container">
18        <div>
19          &copy; 2023　P
20        </div>
21        <div class="clear"></div>
22      </div>
23    </div>
24
25  </body>
26</html>

css
1@charset "utf-8";
2body {
3  background: #ff6969;
4}
5
6.container {
7  max-width: 980px;
8  padding: 0 30px;
9  margin-left: auto;
10  margin-right: auto;
11}
12
13.clear{
14  clear: both;
15}
16
17* {
18  margin: 0;
19  padding: 0;
20}
21
22.footer {
23  line-height: 80px;
24  background-color: #333;
25  color: #ffffff;
26  text-align: center;
27  width: 100%;
28}

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

回答2件

自己解決

bodyに

css
1min-height: 100vh;
2display:flex;
3flex-direction:column;

textに

css
1flex: 1;

で解決しました😭

html
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <meta charset="UTF-8">
6    <title>Home</title>
7    <link rel="icon" href="logo.jpg" type="image/x-icon">
8    <link rel="stylesheet" href="style.css">
9  </head>
10
11  <body>
12
13    <div class="text">
14      <h1>HI.</h1>
15    </div>
16
17    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
18    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
19
20    <div class="footer">
21      <div class="container">
22        <div>
23          &copy; 2023　P
24        </div>
25        <div class="clear"></div>
26      </div>
27    </div>
28
29  </body>
30</html>

css
1@charset "utf-8";
2body {
3  background: #ff6969;
4  min-height: 100vh;
5  display:flex;
6  flex-direction:column;
7
8}
9
10.text {
11  flex: 1;
12}
13
14.container {
15  max-width: 980px;
16  padding: 0 30px;
17  margin-left: auto;
18  margin-right: auto;
19}
20
21.clear{
22  clear: both;
23}
24
25* {
26  margin: 0;
27  padding: 0;
28}
29
30.footer {
31  line-height: 80px;
32  background-color: #333;
33  color: #ffffff;
34  text-align: center;
35  width: 100%;
36}