fix footer position

src/pages/Page.tsx

+import { Box, makeStyles } from '@material-ui/core';
 import React from 'react';
-import styled from 'styled-components';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
 
-const Container = styled.div(
-  (props) => `
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  background-color: ${props.theme.palette.background.default};
-`,
-);
-
-const MainContent = styled.div`
-  height: 100%;
-`;
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+    background: theme.palette.background.default,
+  },
+}));
 
 const Page: React.FC = ({ children }) => {
+  const classes = useStyles();
+
   return (
-    <Container>
+    <Box className={classes.root}>
       <Header />
-      <MainContent>{children}</MainContent>
+      <Box flexGrow={1} flexShrink={0} flexBasis="auto">
+        {children}
+      </Box>
       <Footer />
-    </Container>
+    </Box>
   );
 };