diff --git a/index.html b/index.html
index 68588ce..39efa31 100644
--- a/index.html
+++ b/index.html
@@ -1,35 +1,66 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/vite.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Vue FormKit Example</title>
+    <link
+      rel="stylesheet"
+      href="/src/assets/tailwind.css"
+    />
+    <link
+      rel="stylesheet"
+      href="/src/assets/main.css"
+    />
 
-<head>
-  <meta charset="UTF-8" />
-  <link
-    rel="icon"
-    type="image/svg+xml"
-    href="/vite.svg"
-  />
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1.0"
-  />
-  <title>Vue FormKit Example</title>
-  <link
-    rel="stylesheet"
-    href="/src/assets/tailwind.css"
-  >
-  <link
-    rel="stylesheet"
-    href="/src/assets/main.css"
-  >
+    <script>
+      function setAppHeight() {
+        const app = document.getElementById('app');
+        app.style.minHeight = `${window.innerHeight}px`;
+      }
 
-</head>
+      window.addEventListener('resize', setAppHeight);
+      window.addEventListener('load', setAppHeight);
+    </script>
+    <style>
+      #app {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
 
-<body>
-  <div id="app"></div>
-  <script
-    type="module"
-    src="/src/main.ts"
-  ></script>
-</body>
+      @supports (min-height: 100dvh) {
+        #app {
+          min-height: 100dvh;
+        }
+      }
 
-</html>
\ No newline at end of file
+      .page-wrapper {
+        flex-grow: 1;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app">
+      <div
+        class="page-wrapper"
+        style="display: flex; justify-content: center; align-items: center"
+      >
+        Loading...
+      </div>
+    </div>
+    <script
+      type="module"
+      src="/src/main.ts"
+    ></script>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
index 031ccaf..1ae1d90 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,22 +2,25 @@
 import AllCustom from './all-custom/all-custom.vue';
 import TutorialForm from './tutorial-form/index.vue';
 import ZodForm from './zod-form/index.vue';
+
 </script>
 
 <template>
-  <ZodForm v-if="false" />
-  <TutorialForm v-if="false" />
+  <div class="page-wrapper">
+    <ZodForm v-if="false" />
+    <TutorialForm v-if="false" />
 
-  <!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> -->
-  <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
-    <AllCustom />
-  </div>
-  <!-- </div> -->
+    <!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> -->
+    <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
+      <AllCustom />
+    </div>
+    <!-- </div> -->
 
-  <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
-    <FloatLabel>
-      <label for="username">用户名</label>
-      <InputText id="username"></InputText>
-    </FloatLabel>
+    <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
+      <FloatLabel>
+        <label for="username">用户名</label>
+        <InputText id="username"></InputText>
+      </FloatLabel>
+    </div>
   </div>
 </template>
