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>
   );
 };