fix(site): fix mobile style

varletjs · Dec 17, 2021 · 3189225 · 3189225
1 parent 2a62eaa
commit 3189225
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative">
+  <div>
     <header>
       <var-site-app-bar
         class="app-bar"
@@ -210,17 +210,31 @@ export default defineComponent({
   -webkit-font-smoothing: antialiased;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   margin: 0;
   padding: 0;
-  min-height: 100%;
+  height: 100%;
   font-family: 'Roboto', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--site-config-color-bar);
   color: var(--site-config-color-text);
   transition: background-color .25s, color .25s;
 }
 
+#app {
+  height: 100%;
+  > div {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+}
+
 ::-webkit-scrollbar {
   display: none;
   width: 0;
@@ -244,6 +258,7 @@ header {
   position: fixed;
   z-index: 99;
   width: 100%;
+  flex: 0;
   font-weight: bold;
 }
 
@@ -261,6 +276,7 @@ header {
 
 .router-view__block {
   padding: 54px 12px 15px;
+  flex: 1;
 }
 
 * {