footer always on bottom

src/App.vue

@@ -8,8 +8,9 @@ import Footer from '@/components/Footer/Footer.vue'
     <n-message-provider>
       <n-dialog-provider>
         <n-notification-provider>
+          <div class="app-layout">
             <NavBar />
-
+            <div class="main-content">
               <n-grid
                 responsive="screen"
                 item-responsive
@@ -26,11 +27,13 @@ import Footer from '@/components/Footer/Footer.vue'
 
                 <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
               </n-grid>
+            </div>
+            <Footer />
+          </div>
         </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;
+}