CODEWITHSUNDEEP
javascripthtmlcssreactjsfooter
ocom
ocom

Reputation: 141

Footer Not Sticking to Bottom of React Page

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>

Upvotes: 0

Views: 2922

Answers (2)

ocom
ocom

Reputation: 141

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;
}

Upvotes: 2

Maxim Dyuzhinov
Maxim Dyuzhinov

Reputation: 308

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;
  }
}

Upvotes: 1

Related Questions