Make layout expand to fill height of body

2 years ago · 2fd0107197
parent 2c059a655e
commit 2fd0107197
3 changed files with 9 additions and 12 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
-  <body>
+  <body style="display: flex; height: 100%; min-height: 100vh; flex-direction: column">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- a/src/App.vue
+++ b/src/App.vue
@ -19,13 +19,9 @@ import { MathPage } from "./support/page";
      </div>
    </v-app-bar>

-    <v-main>
-      
-      <v-card elevation="0" height="h-100">
-          <router-view />
-
-      </v-card>
-    </v-main>
+    <div style="margin-top: 30px">  <!-- Account for the navbar height -->
+      <router-view/>
+    </div>
  </v-app>
 </template>

@ -35,8 +31,9 @@ import { MathPage } from "./support/page";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 .links {
  color: #fff;
--- a/src/main.ts
+++ b/src/main.ts
@ -14,8 +14,8 @@ const vuetify = createVuetify({
    components,
    directives,
    theme: {
-        defaultTheme: 'dark'
-      }
+        defaultTheme: 'dark',
+    },
 }) // Replaces new Vuetify(...)
 app.use(vuetify)