forcing footer to always be at bottom

client/src/views/index.js

@@ -1,8 +1,6 @@
-import Header from './header'
-import Footer from './footer'
 import Home from './home'
 import Charts from './charts'
 import Callback from './callback'
 import Layout from './layout'
 
-export { Layout, Header, Footer, Home, Charts, Callback }
+export { Layout, Home, Charts, Callback }

client/src/views/layout/footer/styles.js

@@ -38,7 +38,6 @@ const styles = theme => ({
   footer: {
     borderTop: `4px solid ${theme.palette.secondary.light}`,
     padding: `${theme.spacing.unit * 6}px 0`,
-    marginTop: '-42px',
     backgroundColor: '#19191C', /* #29292c */
     color: theme.palette.primary.light
   },

client/src/views/layout/index.js

@@ -9,9 +9,11 @@ import styles from './styles'
 class Index extends React.Component {
   render () {
     return (
-      <div className={this.props.classes.mainContainer}>
+      <div className={this.props.classes.layout}>
         <Header auth={this.props.auth} />
-        {this.props.children}
+        <div>
+          {this.props.children}
+        </div>
         <Footer />
       </div>
     )

client/src/views/layout/styles.js

@@ -1,6 +1,9 @@
 const styles = theme => ({
-  mainContainer: {
-    minHeight: 1000
+  layout: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    minHeight: 'calc(100vh)'
   }
 })