Footer Stuck To Bottom Of Page With Html, Css

Sanjar Kairosh
September 18th, 20203 min read
Photo by Halacious on Unsplash

halacious-tZc3vjPCk-Q-unsplash.jpg

Photo by Halacious on Unsplash

I wanted the footer of my web applications to always stick to the bottom of the page, regardless of the size of the content of the page.

I didn’t want the footer to be displayed in the middle of the page, when the height of the content was small.

ftrmidpgfnt.png

The footer is up in the middle of the page.

My Solution

I set a minimum height on the content as some portion of the web browser window height.

One approach was to set the min-height of the content to 100vh ,with vh being the viewport height. This resulted in having to scroll down to see the footer.

footermidpage.png

Another approach was to calculate the min-height of the content based on the height of the footer, such that we would not have to scroll down to see the footer.

I set the footer height as 7rem and set the min-height of the content as calc(100vh — 7rem) .

ftrbtmfnt.jpg

The Html

I had a parent container, within which I had the content element, and the footer element.

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

The Styling

I set the height of the body to 100%, with no margins or paddings.

body {
	height: 100%;
	margin: 0;
	padding: 0;
}

The container class only set its position to relative. This would prove useful position elements within the container.

.container {
	position: relative;
}

In the content class I set the minimum height, a background color, and I position the text centrally using flex.

.content {
	min-height: calc(100vh - 7rem);
	background: #f7de99;
}

Finally for the footer I set the height, background, and positioned the text centrally as well.

.footer {
	height: 7rem;
	background: #faf598;
}

This should ensure your footer always sticks to the bottom of the page.


I may add an article about including a navigation bar in the page sometime in the future.

Please let me know if I made any mistakes, or if there are better ways to do it. Any feedback is appreciated!

Blogs

copyright ©2021 all rights reserved, Sanjar Kairosh
illusrations by icons8