底部组件优化

This commit is contained in:
unknown 2024-01-31 18:34:10 +08:00
parent 46bb144f0a
commit 8614d4ebaf
3 changed files with 22 additions and 6 deletions

View File

@ -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;

View File

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

View File

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