sticky footer

src/App.module.scss

@@ -1,9 +1,14 @@
+@import './styles/variables';
+
 .app {
     height: 100%;
-    display: flex;
-    flex-direction: column;
 
-    > * {
+    // for sticky footer
-        width: 100%;
+    display: flex;
-    }
+    min-height: calc(100vh - #{$page-frame * 2});
+    flex-direction: column;
+}
+
+.main {
+    flex: 1;
 }

src/App.tsx

@@ -108,7 +108,11 @@ class App extends Component<{}, AppState> {
                     <Router>
                         <>
                             <Header />
-                            <Routes />
+
+                            <main className={styles.main}>
+                                <Routes />
+                            </main>
+
                             <Footer />
                         </>
                     </Router>

src/components/Footer.module.scss

@@ -4,6 +4,7 @@
     color: $brand-grey-light;
     width: 100%;
     text-align: center;
+    margin-top: $spacer;
     padding-top: $spacer;
     padding-bottom: $spacer;
     align-self: flex-end;