footer always on bottom

src/App.vue

@@ -8,29 +8,32 @@ import Footer from '@/components/Footer/Footer.vue'
     <n-message-provider>
       <n-dialog-provider>
         <n-notification-provider>
-          <NavBar />
+          <div class="app-layout">
+            <NavBar />
+            <div class="main-content">
+              <n-grid
+                responsive="screen"
+                item-responsive
+                cols="24"
+                :x-gap="16"
+                :y-gap="16"
+                class="shift"
+              >
+                <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
 
-          <n-grid
+                <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
-            responsive="screen"
+                  <router-view />
-            item-responsive
+                </n-gi>
-            cols="24"
-            :x-gap="16"
-            :y-gap="16"
-            class="shift"
-          >
-            <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
 
-            <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
+                <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
-              <router-view />
+              </n-grid>
-            </n-gi>
+            </div>
-
+            <Footer />
-            <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
+          </div>
-          </n-grid>
         </n-notification-provider>
       </n-dialog-provider>
     </n-message-provider>
   </n-config-provider>
-  <Footer />
 </template>
 
 <style scoped>

src/components/Footer/Footer.vue

@@ -1,5 +1,4 @@
 <script setup>
-
 </script>
 
 <template>

src/styles/styles.css

@@ -120,3 +120,20 @@
 .link-like-text {
   cursor: pointer;
 }
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.main-content {
+  flex: 1;
+}