In this tutorial I will explain how to keep the footer at the bottom of the page using Flexbox.
First of all create a container element with the height value of ‘100vh’.
1const Container = ({ children }) => (2 <div3 style={{4 height: "100vh",5 display: "flex",6 flexDirection: "column",7 backgroundColor: "#EFEFEF"8 }}9 >10 {children}11 </div>12);
Let’s create our Footer component:
1const Footer = () => (2 <div3 style={{4 display: "flex",5 alignItems: "center",6 justifyContent: "center",7 width: "100%",8 minHeight: 200,9 backgroundColor: "#29b6f6",10 color: "white",11 fontSize: 25,12 marginTop: "auto"13 }}14 >15 This is footer16 </div>17);
As you see I have added marginTop: “auto” to the style object of the footer element. That will put that element at the end of that flex container.
Final code will look like this:
1<Container>2 <Body />3 <Footer />4</Container>
Page will look like this:
