diff --git a/src/pages/layouts/with-footer/index.module.scss b/src/pages/layouts/with-footer/index.module.scss
new file mode 100644
index 0000000..2ba6248
--- /dev/null
+++ b/src/pages/layouts/with-footer/index.module.scss
@@ -0,0 +1,7 @@
+.playedu-app {
+  width: 100vw;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
diff --git a/src/pages/layouts/with-footer/index.tsx b/src/pages/layouts/with-footer/index.tsx
index cd6d412..bf9c134 100644
--- a/src/pages/layouts/with-footer/index.tsx
+++ b/src/pages/layouts/with-footer/index.tsx
@@ -2,15 +2,16 @@ import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import LoadingPage from "../../loading";
 import { TabBarFooter } from "../../../components";
+import styles from "./index.module.scss";
 
 const WithoutHeaderWithoutFooter = () => {
   return (
-    <>
+    <div className={styles["playedu-app"]}>
       <Suspense fallback={<LoadingPage />}>
         <Outlet />
       </Suspense>
       <TabBarFooter></TabBarFooter>
-    </>
+    </div>
   );
 };