【CSS】Footer(フッター)の表示位置をスクロールさせずに表示させたい

###やりたいこと
画面上部にしか表示している要素（枠）がない場合は、スクロールせずにフッターを表示させたいです。
画面中央部に何かしらの要素があり、スクロールが必要な場合は、スクロールさせてフッターを表示させたいです。

イメージで言うとこのサイトのようなフッターの動きをさせたいです。
⇒参考サイト

・ウインドウサイズが縦に最大の時は、スクロールせずにフッターが表示されています。
・ウインドウサイズが極小になる時は、スクロールしてフッターが表示されています。

###現状
下記図をご覧ください。

簡単なログイン画面ですが、画面上部に入力フォームがあります。
画面下部にフッターがあります。

画面中央には、何も要素はありません。
この時、スクロールしなければフッターが見られません。

⇒これを、画面中央に何も要素がなければスクロールせずに表示させたいのです。

###ソース

HTML
1<style>
2.wrapper{
3    height: 100%;
4    /*min-height: 100vh;*/
5    bottom: auto;
6    position: relative;/*←相対位置*/
7    padding-bottom: 120px;/*←footerの高さ*/
8    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
9}
10
11footer{
12    width: 100%;
13    background-color: transparent;
14    color: #888;
15    text-align: center;
16    padding: 30px 0;
17
18    position: absolute;/*←絶対位置*/
19    bottom: 0; /*下に固定*/
20}
21</style>
22
23
24
25<div class="container-fluid">
26
27    <div class="row justify-content-center">
28        <div class="col-lg-11">
29            <div class="">
30                
31			    <div class="">
32
33			        <div class="row justify-content-center ">
34			            <span class="login-head-title"><b>サインイン</b></span>
35			        </div>
36
37
38			        <form method="POST" action="http://localhost:8001/login">
39			            <input type="hidden" name="_token" value="mWyK2bNEQYfdryR47gpen5iKkPr1pT8xvGzt1MzI">
40
41			            <fieldset class="fieldset">
42			                <input id="email" type="email" class="input " name="email" value="" required autocomplete="email" autofocus>
43			                <label class="label">メールアドレス</label>
44
45                        </fieldset>
46
47
48			            <fieldset class="fieldset">
49			                <input id="password" type="password" class="input " name="password" required autocomplete="current-password">
50			                <label class="label">パスワード</label>
51
52                        </fieldset>
53
54
55
56			            <button class="" style="background-color: #6cb2eb">サインイン</button>
57			        </form>
58
59
60			    </div>
61a<br>
62a<br>
63a<br>
64a<br>
65a<br>
66a<br>
67a<br>
68a<br>
69            </div>
70        </div>
71    </div>
72</div>
73
74
75
76<div class="wrapper">
77    <footer>
78        <hr>
79        <p>&copy; 2021 XXXXXXX</p>
80    </footer>
81</div>

どのようにしたらよろしいでしょうか？

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

回答1件

ベストアンサー

footerの上のブロック(.container-fluid) の高さを min-height で画面高さ－footerの高さに設定すればどうでしょう。

css
1* {
2    box-sizing: border-box;
3}
4body {
5 margin: 0;
6}
7.container-fluid {
8  min-height: calc(100vh - 120px);
9  padding: 8px;
10}
11footer{
12  width: 100%;
13  height: 120px;
14  background-color: transparent;
15  color: #888;
16  text-align: center;
17  padding: 30px 0 0;
18}