diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d3d7820567..11807b3d9d 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -141,8 +141,8 @@ body {
 
 #web {
   background-color: var(--oc-role-chrome);
-  height: 100vh;
-  max-height: 100vh;
+  height: 100dvh;
+  max-height: 100dvh;
   overflow-y: hidden;
 
   .mark-highlight {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 4818d9f755..d7d13a4805 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -199,7 +199,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-flow: column;
   flex-wrap: nowrap;
-  height: 100vh;
+  height: 100dvh;
 
   #global-progress-bar {
     z-index: 10;