底部组件优化

src/index.scss

@@ -33,6 +33,18 @@ body {
   min-height: 100vh;
 }
 
+.layout-box {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.footer-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 .main-body {
   width: 100%;
   height: auto;

src/pages/layouts/with-header-with-footer/index.tsx

@@ -5,13 +5,15 @@ import LoadingPage from "../../loading";
 
 const WithHeaderWithFooter = () => {
   return (
-    <>
+    <div className="layout-box">
       <Header></Header>
       <Suspense fallback={<LoadingPage height="100vh" />}>
         <Outlet />
       </Suspense>
+      <div className="footer-box">
         <Footer></Footer>
-    </>
+      </div>
+    </div>
   );
 };
 

src/pages/layouts/without-header-with-footer/index.tsx

@@ -5,12 +5,14 @@ import LoadingPage from "../../loading";
 
 const WithoutHeaderWithFooter = () => {
   return (
-    <>
+    <div className="layout-box">
       <Suspense fallback={<LoadingPage height="100vh" />}>
         <Outlet />
       </Suspense>
+      <div className="footer-box">
         <Footer></Footer>
-    </>
+      </div>
+    </div>
   );
 };