Issue 8: use css grid to create a sticky footer

buzzycloud · Dec 3, 2019 · 75cd42b · 75cd42b
1 parent 514e0fc
commit 75cd42b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
@@ -1,7 +1,14 @@
 html,
-body,
-#app {
+body {
     height: 100%;
+    width: 100%;
+}
+
+#__next {
+    min-height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 100%;
 }
 
 .is-clickable {

diff --git a/src/components/common/Layout.jsx b/src/components/common/Layout.jsx
@@ -9,9 +9,7 @@ const Layout = ({ children }) => {
     return (
         <React.Fragment>
             <NavBar />
-            <div className="container" style={{ minHeight: "calc(80vh - 70px)" }}>
-                {children}
-            </div>
+            <div className="container">{children}</div>
             <Footer />
         </React.Fragment>
     );