fix: Replace vh/vw with dvh/dvw for improved viewport handling

kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 1fdfe4a · 1fdfe4a
1 parent b7cb785
commit 1fdfe4a
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/src/main/resources/static/css/card/card-detail.css b/src/main/resources/static/css/card/card-detail.css
@@ -81,8 +81,8 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100dvw;
+    height: 100dvh;
     background-color: rgba(0, 0, 0, 0.3);
     z-index: 1000; /* 배경이 페이지 전체를 덮도록 설정 */
     display: none; /* 기본적으로 숨김 */

diff --git a/src/main/resources/static/css/chat/room.css b/src/main/resources/static/css/chat/room.css
@@ -1,5 +1,5 @@
 .container {
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
   display: flex;
   flex-direction: column;

diff --git a/src/main/resources/static/css/global.css b/src/main/resources/static/css/global.css
@@ -27,7 +27,7 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100vh;
+  height: 100dvh;
   background-color: var(--background);
 }
 

diff --git a/src/main/resources/static/css/oauth/login.css b/src/main/resources/static/css/oauth/login.css
@@ -34,7 +34,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    height: 100dvh;
     background-color: var(--background);
 }
 

diff --git a/src/main/resources/templates/redirect.html b/src/main/resources/templates/redirect.html
@@ -15,7 +15,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            height: 100dvh;
             background-color: #f5f5f5;
         }