chore: ensure the footer stays on the bottom of the page

newrelic · May 8, 2020 · 1187160 · 1187160
1 parent 222882d
commit 1187160
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
@@ -4,6 +4,7 @@
   background-color: var(--color-neutrals-800);
   color: var(--footer-text-color);
   padding: 1.5rem 0;
+  margin-top: 10rem;
 
   .u-container {
     display: flex;

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -6,11 +6,11 @@ import Header from './Header';
 import './styles.scss';
 
 const Layout = ({ children }) => (
-  <>
+  <div className="Layout">
     <Header />
     <main>{children}</main>
     <Footer />
-  </>
+  </div>
 );
 
 Layout.propTypes = {

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -107,3 +107,18 @@ button,
   font-family: var(--primary-font-family);
   cursor: pointer;
 }
+
+/*-- Layout Styles --*/
+.Layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  > main {
+    flex: 1 0 auto;
+  }
+
+  > footer {
+    flex-shrink: 0;
+  }
+}