Question: I created a footer and placed it in the app.jsx file to appear on every page. However, if the content on the page doesn't take up the entire page, the footer floats up. Do I need to update the index.html?

Footer:

```
<Grid container spacing={2} className={classes.container}>
  <Grid xs={12}>
    <a href='https://twitter.com/loremipsum'>
      <SocialIcons>
        <FaTwitter className={classes.icon} />
      </SocialIcons>
    </a>
    <a href='https://www.facebook.com/loremipsum'>
      <SocialIcons>
        <FaFacebookSquare className={classes.icon} />
      </SocialIcons>
    </a>
    <a href='https://www.linkedin.com/company/loremipsum'>
      <SocialIcons>
        <FaLinkedin className={classes.icon} />
      </SocialIcons>
    </a>
  </Grid>
</Grid>

```

Footer Styled:

```
export const useStyles = makeStyles({
container: {
backgroundColor: 'black',
color: '#F5F5F5',
borderTop: '5px solid #669999',
marginTop: 20,
},
icon: {
width: 20,
height: 20,
color: '#669999',
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
},
});
export const SocialIcons = styled.div`
transition: transform 250ms;
display: inline-block;
&:hover {
transform: translateY(-2px);
  }
`;

```

Body of the Index.html

```
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>

```

Answer: 
I got it by placing all the content in a page-container and a content-wrapper in everything except the footer.

App.jsx

```
const App = () => (
  <div className='App'>
    <div className='page-container'>
      <div className='content-wrapper'>
        <NavigationBar />
      </div>
      <Footer />
   </div>
 </div>`);`

```

App.css

```
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-wrapper {
  flex: 1;
}

```
The idea is to have fixed footer height and main content height that takes all height minus footer height.

Your template code should go like this:

```
<div id="root">
  <main>
    Some main content
  </main>
  <footer>
    Some footer content
  </footer>
</div>

```

Styles:

```
#root {
  main {
    min-height: calc(100vh - 100px); 
  }
  footer {
    height: 100px;
  }
}

```