Image for post
Image for post
Photo By Halacious on Unsplash

How To Make Footer Stick to the bottom of the page

Image for post
Image for post
Footer is up in the middle of the page. It looks bad.

My Solution

Image for post
Image for post
Content is minimum 100vh height. Scrolled to see Footer.
Image for post
Image for post

The Html

<div class="container">
<div class="content">
<p>Content</p>
</div>
<footer class="footer">Footer</footer>
</div>

The Styling

body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.content {
min-height: calc(100vh - 7rem);
background: #f7de99;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 7rem;
background: #faf598;
display: flex;
justify-content: center;
align-items: center;
}

Full Stack Engineer. Enjoys reading. Writes about a mixture of topics to satisfy curiosity.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store