Solve the footer float problem

c2ade827 · zhengbo · 29bb4a7c · c2ade827 · c2ade827 · c2ade827
Commit c2ade827 authored 2 years ago by zhengbo
--- a/FrontendFolder/switch-room/package-lock.json
+++ b/FrontendFolder/switch-room/package-lock.json
--- a/FrontendFolder/switch-room/src/App.vue
+++ b/FrontendFolder/switch-room/src/App.vue
@@ -3,9 +3,21 @@ import AppFooter from "@/components/AppFooter.vue";
 import AppHeader from "@/components/AppHeader.vue";
 </script>
 <template>
-  <app-header v-if="!$route.meta.hideHeader"></app-header>
-  <router-view></router-view>
-  <app-footer></app-footer>
+  <body>
+    <app-header v-if="!$route.meta.hideHeader"></app-header>
+    <router-view class="wrapper"></router-view>
+    <app-footer class="footer"></app-footer>
+  </body>
 </template>

-<style></style>
\ No newline at end of file
+<style>
+body {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.wrapper {
+  flex: 1;
+}
+</style>
--- a/FrontendFolder/switch-room/src/components/AppFooter.vue
+++ b/FrontendFolder/switch-room/src/components/AppFooter.vue
@@ -36,7 +36,7 @@
  text-align: left;
  font: normal 16px sans-serif;
  padding: 45px 50px;
-  position: fixed;
+  /*position: fixed;*/
  bottom: 0;
  left: 0;
  right: 0;