Footer Not Sticking to Bottom of React Page
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>
2 answers
solution1
0 2020-10-04 20:29:13
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;
}
}
solution2
0 ACCPTED 2020-10-04 21:28:24
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 technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.