diff --git a/src/@components/@common/Loading/style.ts b/src/@components/@common/Loading/style.ts
index 7bdd2196..0feb2f28 100644
--- a/src/@components/@common/Loading/style.ts
+++ b/src/@components/@common/Loading/style.ts
@@ -9,6 +9,8 @@ export const St = {
     left: 0;
 
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
 
     display: flex;
     justify-content: center;
diff --git a/src/@components/@common/MenuBar/style.ts b/src/@components/@common/MenuBar/style.ts
index a32603a7..9b3562b5 100644
--- a/src/@components/@common/MenuBar/style.ts
+++ b/src/@components/@common/MenuBar/style.ts
@@ -7,6 +7,8 @@ const Root = styled.main`
   right: 0;
   left: 0;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
 
   background-color: ${({ theme }) => theme.newColors.black50};
 
@@ -72,6 +74,8 @@ const ContentsContainer = styled.section`
 
   width: 28.8rem;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
   float: right;
 
   background-color: ${({ theme }) => theme.newColors.white};
diff --git a/src/@components/@common/Modal/style.ts b/src/@components/@common/Modal/style.ts
index 48718ff1..07e2ef6c 100644
--- a/src/@components/@common/Modal/style.ts
+++ b/src/@components/@common/Modal/style.ts
@@ -19,10 +19,14 @@ const GrayRoot = styled(Root)``;
 
 const WhiteRoot = styled(Root)`
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
 `;
 
 const DefaultRoot = styled(Root)`
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
   padding: 1.6rem;
 `;
 
diff --git a/src/@components/CardCollectionPage/CardSlider/style.ts b/src/@components/CardCollectionPage/CardSlider/style.ts
index c0060f7d..53e18b3d 100644
--- a/src/@components/CardCollectionPage/CardSlider/style.ts
+++ b/src/@components/CardCollectionPage/CardSlider/style.ts
@@ -10,6 +10,7 @@ export const St = {
 
     & .slick-slide {
       height: calc(100vh - 14.8rem);
+      height: calc(calc(var(--vh, 1vh) * 100) - 14.8rem);
       max-height: 49.5em;
     }
 
@@ -31,7 +32,6 @@ export const St = {
     }
 
     & .slick-track {
-      /* height: calc(100vh - 10.5rem); */
       height: 52rem;
 
       display: flex;
diff --git a/src/@components/CardCollectionPage/style.ts b/src/@components/CardCollectionPage/style.ts
index 2f1e6fe9..ef02dbc1 100644
--- a/src/@components/CardCollectionPage/style.ts
+++ b/src/@components/CardCollectionPage/style.ts
@@ -2,9 +2,9 @@ import styled from "styled-components";
 
 export const St = {
   MainPage: styled.main`
+    height: 100vh;
     height: calc(var(--vh, 1vh) * 100);
     min-height: -webkit-fill-available;
-    /* min-height: fill-available; */
 
     padding: 8rem 0 5.1rem;
 
diff --git a/src/@components/DeletePage/style.ts b/src/@components/DeletePage/style.ts
index 11bcc93c..bea81a41 100644
--- a/src/@components/DeletePage/style.ts
+++ b/src/@components/DeletePage/style.ts
@@ -4,6 +4,8 @@ import styled, { css } from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   TitleContainer: styled.section`
diff --git a/src/@components/Error404Page/style.ts b/src/@components/Error404Page/style.ts
index 048d704f..0f0ecbae 100644
--- a/src/@components/Error404Page/style.ts
+++ b/src/@components/Error404Page/style.ts
@@ -4,6 +4,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
 
     padding: 6.4rem 1.6rem 0;
 
diff --git a/src/@components/JoinPage/AgreePage/style.ts b/src/@components/JoinPage/AgreePage/style.ts
index b71fdabe..94e29bdd 100644
--- a/src/@components/JoinPage/AgreePage/style.ts
+++ b/src/@components/JoinPage/AgreePage/style.ts
@@ -4,6 +4,8 @@ import styled, { css, keyframes } from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   JoinAgree: styled.section`
diff --git a/src/@components/JoinPage/EmailAuthenticationPage/style.ts b/src/@components/JoinPage/EmailAuthenticationPage/style.ts
index 12309c50..a47a2b0e 100644
--- a/src/@components/JoinPage/EmailAuthenticationPage/style.ts
+++ b/src/@components/JoinPage/EmailAuthenticationPage/style.ts
@@ -2,6 +2,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.section`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   EmailAuthenticationSection: styled.section`
diff --git a/src/@components/JoinPage/EmailConfirmPage/style.ts b/src/@components/JoinPage/EmailConfirmPage/style.ts
index 174435bb..addc6975 100644
--- a/src/@components/JoinPage/EmailConfirmPage/style.ts
+++ b/src/@components/JoinPage/EmailConfirmPage/style.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.section`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   EmailConfirmContainer: styled.section`
diff --git a/src/@components/JoinPage/UserProfilePage/style.ts b/src/@components/JoinPage/UserProfilePage/style.ts
index f381942d..90835495 100644
--- a/src/@components/JoinPage/UserProfilePage/style.ts
+++ b/src/@components/JoinPage/UserProfilePage/style.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   ProfileContainer: styled.section``,
diff --git a/src/style/globalStyle.ts b/src/style/globalStyle.ts
index 5e34b139..69c0838f 100644
--- a/src/style/globalStyle.ts
+++ b/src/style/globalStyle.ts
@@ -1,9 +1,9 @@
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
-  :root {
-    --vh: 100%;
-   }
+  html {
+    height: -webkit-fill-available;
+  }
 
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
diff --git a/src/util/setScreenSize.ts b/src/util/setScreenSize.ts
index e6e59f1b..1d5d9346 100644
--- a/src/util/setScreenSize.ts
+++ b/src/util/setScreenSize.ts
@@ -1,4 +1,9 @@
 export default function setScreenSize() {
   const vh = window.innerHeight * 0.01;
   document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+  window.addEventListener("resize", () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  });
 }