From 8614d4ebafefde588b3f3a9ee81e27771d649c8a Mon Sep 17 00:00:00 2001
From: unknown <18119604035@163.com>
Date: Wed, 31 Jan 2024 18:34:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E9=83=A8=E7=BB=84=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.scss                                       | 12 ++++++++++++
 src/pages/layouts/with-header-with-footer/index.tsx  |  8 +++++---
 .../layouts/without-header-with-footer/index.tsx     |  8 +++++---
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index cbc9dca..42555a9 100644
--- a/src/index.scss
+++ b/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;
diff --git a/src/pages/layouts/with-header-with-footer/index.tsx b/src/pages/layouts/with-header-with-footer/index.tsx
index 9d87a56..934a180 100644
--- a/src/pages/layouts/with-header-with-footer/index.tsx
+++ b/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>
-      <Footer></Footer>
-    </>
+      <div className="footer-box">
+        <Footer></Footer>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/pages/layouts/without-header-with-footer/index.tsx b/src/pages/layouts/without-header-with-footer/index.tsx
index 68dca21..9f9a955 100644
--- a/src/pages/layouts/without-header-with-footer/index.tsx
+++ b/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>
-      <Footer></Footer>
-    </>
+      <div className="footer-box">
+        <Footer></Footer>
+      </div>
+    </div>
   );
 };