diff --git a/index.html b/index.html
index b566e0c..092026a 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,22 @@
         <title>ChatGPT | OVINC</title>
         <script src="/extra-assets/js/cos-js-sdk-v5.min.js?v=20240306083000"></script>
         <script src="https://turing.captcha.qcloud.com/TCaptcha.js?v=20240420185400"></script>
+        <style>
+            :root {
+                --vh: 1vh;
+            }
+        </style>
+        <script>
+          !(function (n, e) {
+            function setViewHeight() {
+              const windowVH = e.innerHeight / 100
+              n.documentElement.style.setProperty('--vh', windowVH + 'px')
+            }
+            const i = 'orientationchange' in window ? 'orientationchange' : 'resize'
+            n.addEventListener('DOMContentLoaded', setViewHeight)
+            e.addEventListener(i, setViewHeight)
+          })(document, window)
+        </script>
     </head>
     <body>
         <div id="app"></div>
diff --git a/src/App.css b/src/App.css
index 61fa258..99a0079 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,7 +13,7 @@ body[arco-theme='dark'] {
 
 html, body, #app {
     width: 100vw;
-    height: 100vh;
+    height: calc(100 * var(--vh));
 }
 
 html {
diff --git a/src/App.vue b/src/App.vue
index 971ff53..df071bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -181,7 +181,7 @@ onMounted(() => initRUM());
 }
 
 #app-layout {
-  height: 100vh;
+  height: calc(100 * var(--vh));
   width: 100vw;
 }
 
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index 76fbe70..1119d12 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -111,6 +111,6 @@ const setPromptForm = (data) => promptForm.value = data;
   width: 100%;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 160px);
+  max-height: calc(100 * var(--vh) - 160px);
 }
 </style>
