diff --git a/src/layouts/sakai-vue/styles/_core.scss b/src/layouts/sakai-vue/styles/_core.scss
index 8462912..c9dce8e 100644
--- a/src/layouts/sakai-vue/styles/_core.scss
+++ b/src/layouts/sakai-vue/styles/_core.scss
@@ -20,4 +20,7 @@ a {
 
 .layout-wrapper {
   min-height: 100vh;
+  @supports (min-height: 100dvh) {
+    min-height: 100dvh;
+  }
 }
diff --git a/src/layouts/sakai-vue/styles/_main.scss b/src/layouts/sakai-vue/styles/_main.scss
index bb299d4..e85dcb2 100644
--- a/src/layouts/sakai-vue/styles/_main.scss
+++ b/src/layouts/sakai-vue/styles/_main.scss
@@ -5,6 +5,9 @@
   justify-content: space-between;
   padding: 6rem 2rem 0 2rem;
   transition: margin-left var(--layout-section-transition-duration);
+  @supports (min-height: 100dvh) {
+    min-height: 100dvh;
+  }
 }
 
 .layout-main {
diff --git a/src/layouts/sakai-vue/styles/_menu.scss b/src/layouts/sakai-vue/styles/_menu.scss
index 406b2cb..550a616 100644
--- a/src/layouts/sakai-vue/styles/_menu.scss
+++ b/src/layouts/sakai-vue/styles/_menu.scss
@@ -15,6 +15,10 @@
   background-color: var(--surface-overlay);
   border-radius: var(--content-border-radius);
   padding: 0.5rem 1.5rem;
+
+  @supports (height: 100dvh) {
+    height: calc(100dvh - 8rem);
+  }
 }
 
 .layout-menu {
diff --git a/src/layouts/sakai-vue/styles/_responsive.scss b/src/layouts/sakai-vue/styles/_responsive.scss
index 6b14bcb..e009288 100644
--- a/src/layouts/sakai-vue/styles/_responsive.scss
+++ b/src/layouts/sakai-vue/styles/_responsive.scss
@@ -30,6 +30,10 @@
           0px 3px 5px rgba(0, 0, 0, 0.02),
           0px 0px 2px rgba(0, 0, 0, 0.05),
           0px 1px 4px rgba(0, 0, 0, 0.08);
+
+        @supports (height: 100dvh) {
+          height: 100dvh;
+        }
       }
 
       &.layout-overlay-active {
@@ -84,6 +88,10 @@
       transition:
         transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
         left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+
+      @supports (height: 100dvh) {
+        height: 100dvh;
+      }
     }
 
     .layout-mask {