スクロールしてもbodyのheightが表示画面以上に延びない

スクロールに合わせてbodyのheightを伸ばしたい

レスポンシブ対応させたくて，(orientation:landscape)を用いて横向き画面用のデザインをつくっています。
当然ですがbodyの要素がデフォルトの画面の高さからはみ出すので，はみ出した分も収まるようにbodyのheightを合わせて伸ばしたいです。

よろしくお願いいたします。

発生している問題・エラーメッセージ

bodyのheightがデフォルトの画面の高さで固定されてしまいます。
bodyいっぱいに画像を表示したいので，はみ出した部分までheightが伸びてくれないとスクロールした時に画像が切れてしまうのでどうにかしたいです。

例）iPhoneXだと画面解像度が812×375なので，heightを指定してもbodyのheightが375px以上にならない

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Sign up</title>
7    <link rel="stylesheet" href="signup.css">
8</head>
9<body>
10    <header>
11        <!-- ▼スマホ用のロゴ画像 -->
12        <img class="sm" src="logo2.png" alt="ロゴ">
13        <!-- ▼タブレット，PC用のロゴ画像 -->
14        <img class="pc" src="logo1.png" alt="ロゴ">
15    </header>
16    <div class="wrap">
17        <div class="main_r"></div>
18        <div class="main_l">
19            <div class="signupbox">
20                <div class="signup">
21                    <form>
22                        <h1 class="font">Sign up</h1>
23                        <h2 class="font">User name</h2>
24                        <input type="text">
25                        <h2 class="font">Email</h2>
26                        <input type="email">
27                        <h2 class="font">Password</h2>
28                        <input type="password" required>
29                        <input type="password" placeholder="確認のためにもう一度入力してください" required>
30                        <a class="btn arrow_w font" href="#">
31                            Sign up
32                            <img class="icon" src="rightarrow.png" alt="#">
33                        </a>
34                    </form>
35                </div>
36                <hr color="#ADB1EB">
37                <div class="tologin">
38                    <p>既にログイン済みの方はこちら</p>
39                    <a class="btn arrow_w font" href="login.html">
40                        Login
41                        <img class="icon" src="rightarrow2.png" alt="">
42                    </a>
43                </div>    
44            </div>
45        </div>    
46    </div>
47</body>
48</html>

css
1* {
2    margin: 0;
3    padding: 0;
4}
5  
6html {
7    font-size: 62.5%;
8}
9
10body {
11    background-color: #ECECEC;
12    font-size: 1.6em;
13}
14
15/******* ▼ロゴ画像の設定 *******/
16.sm {
17    display: block !important;
18}
19.pc {
20    display: none !important;
21}
22
23/******* ▼ヘッダーのデザイン *******/
24header {
25    position: absolute;
26    top: 0%;
27    left: 50%;
28    transform: translateX(-50%);
29    height: 10%;
30    width: 90%;
31    z-index: 20;
32}
33header img {
34    position: absolute;
35    top: 50%;
36    left: 0%;
37    transform: translateY(-50%);
38    height: 50%;
39    width: auto;
40}
41
42/******* ▼メインのデザイン *******/
43.wrap {
44    position: relative;
45    height: 100vh;
46    z-index: 10;
47}
48/** メイン右側 **/
49.main_r {
50    position: absolute;
51    width: 100%;
52    height: 100vh;
53    background-image: url(signup_m.jpg);
54    background-size: cover;
55
56}
57/** メイン左側 **/
58.main_l {
59    position: absolute;
60    top: 13%;
61    left: 50%;
62    transform: translateX(-50%);
63    width: 90%;
64    height: 56rem;
65    border-radius: 1rem;
66    background-color: #e8f0ff;
67}
68/** サインアップボックスのデザイン **/
69.signupbox {
70    display: flex;
71    flex-direction: column;
72    justify-content: center;
73    position: absolute;
74    top: 50%;
75    left: 50%;
76    transform: translate(-50%, -50%);
77    width: 90%;
78    height: 95%;
79}
80.signup h1 {
81    margin-bottom: 1.5rem;
82    color: #07005e;
83    font-size: 3rem;
84}
85.signup h2 {
86    color: #adb1eb;
87    font-size: 2.5rem;
88    font-weight: lighter;
89}
90.signup a, input {
91    width: 100%;
92}
93input {
94    margin: 1rem 0;
95    border: none;
96    border-bottom: 1px solid #adb1eb;
97    background-color: #e8f0ff;
98    color: #07005e;
99    font-size: 1.5rem;
100    font-family: serif;
101}
102input:nth-of-type(4) {
103    margin-top: 2.4rem;
104}
105input::placeholder {
106    color: #adb1eb;
107}
108input:focus {
109    outline: none;
110}
111.signup a {
112    border: 1px solid #adb1eb;
113    background-color: #adb1eb;
114    color: #07005e;
115    transition: .3s;
116}
117.arrow_w:hover {
118    background-color: #363EA9;
119    border: 1px solid #363EA9;
120}
121.arrow_w:active {
122    opacity: 0.7;
123}
124hr {
125    margin: 3rem 0;
126}
127.tologin p {
128    color: #07005e;
129    font-size: 1.5rem;
130    font-family: serif;
131    text-align: center;
132}
133.tologin a {
134    border: 1px solid #07005e;
135    background-color: #07005e;
136    color: #e8f0ff;
137    transition: .3s;
138}
139.btn {
140    display: flex;
141    justify-content: center;
142    align-items: center;
143    width: 100%;
144    margin-top: 1rem;
145    padding: 0.7rem 0;
146    border-radius: 10rem;
147    font-size: 2rem;
148    text-decoration: none;
149}
150.icon {
151    width: 8%;
152    margin-left: 1rem;
153}
154.font {
155    font-family: 'Times New Roman', Times, serif;
156}
157
158/* ****** ▼極小スマホ用のデザイン ****** */
159@media (orientation:portrait) and (max-width: 360px) {
160    html {
161        font-size: 50%;
162    }
163}
164
165/******* ▼画面横向き用のデザイン（中～小） *******/
166@media (orientation:landscape) and (max-width:700px) {
167    html {
168        font-size: 50%;
169    }
170
171    .signupbox {
172        width: 80%;
173    }
174}
175
176/******* ▼タブレット用デザイン *******/
177@media (orientation:portrait) and (min-width: 600px) {
178    html {
179        font-size: 75%;
180    }
181
182    .sm {
183        display: none !important;
184    }
185
186    .pc {
187        display: block !important;
188    }
189
190    header img {
191        left: -3%;
192    }    
193
194    .main_r {
195        right: 0%;
196        width: 50%;
197        background-image: url(signup_l.jpg);
198    }
199    
200    .main_l {
201        top: 0%;
202        left: 0%;
203        transform: inherit;
204        width: 50%;
205        height: 100%;
206        border-radius: inherit;
207    }
208    
209    .signupbox {
210        width: 85%;
211    }
212}
213
214/******* ▼パソコン，タブレット横向き用のデザイン *******/
215@media (orientation:landscape) and (min-width: 1024px) {
216    body {
217        height: 100vh;
218    }
219
220    .sm {
221        display: none !important;
222    }
223
224    .pc {
225        display: block !important;
226    }
227
228    .wrap {
229        top: 50%;
230        left: 50%;
231        transform: translate(-50%, -50%);
232        width: 90%;
233        height: 80%;
234        box-shadow: 0px 15px 13px -3px rgba(0, 0, 0, 0.5);
235    }
236
237    .signupbox {
238        width: 80%;
239    }
240
241    .main_r {
242        top: 50%;
243        right: 0%;
244        transform: translateY(-50%);
245        width: 60%;
246        height: 100%;
247        background-image: url(signup_l.jpg);
248    }
249    
250    .main_l {
251        top: 0%;
252        left: 0%;
253        transform: translateX(0%);
254        height: 100%;
255        width: 40%;
256        box-shadow: none;
257        border-radius: inherit;
258    }
259}

試したこと

・html，bodyにheightを指定せずに自動で画面サイズに合わせて表示しようとした
→positionを指定しているためheightが0になり没
・html，bodyにheight:autoを指定したが，こちらもまたブラウザ上でheightが0になってしまい没
・html，bodyにheight:100vhを指定
→100vhはデフォルトでの画面のheightのことなのでスクロールすると切れることが判明し没
・htmlにheight:100%を，bodyにmin-height:100%を指定して最低限のheightを指定したが効かなかったため没