Without Using Fixed Position Keep Footer at Bottom of a Page When Scrolling

A sticky footer is always showing to the bottom of a browser window. But sometimes we don’t have enough content to lower the footer. In these cases, content hangs in the middle of the window.

In this tutorial, I will show you how to keep the footer at the bottom of a page without using absolute position.

Without Using Fixed Position Keep Footer at Bottom of a Page When Scrolling

How to create a sticky footer at the bottom of a page?

Earlier we used to make a fixed footer by making the height of the <body> 100% and also set the minimum height of the wrapper to 100%.

After that, set the footer position: absolute; and also set the bottom value to 0. It will create a sticky footer at the bottom of the page.

Nowadays, flexbox is widely supported by all browsers. By using flex we can easily create a footer area at the bottom of a page. Let’s check the HTML structure first.

HTML Layout

<body>
	<div class="wrapper">
		<div class="header">Site Logo</div>
		<div class="content"> 
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
		</div>
		<div class="footer">All Right Reserved</div>
	</div>
</body>
  • Inside the <body>, the .wrapper wraps the header, content and footer section.
  • The .header section will show at the top of the page.
  • .content will hold the all page contents.
  • This .footer section will show at the bottom of the page.

Apply CSS

body {
	padding: 0;
	margin: 0;
	color: #5f5f5f;
}
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.header {
	border-bottom: 1px solid #dad8d8;
	background-color: #fff;
	padding: 0 20px;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 30px;
}

.content {
	background-color: #f7f7f7;
	flex-grow: 1;
	padding: 20px;
	font-size: 24px;
	line-height: 34px;
}

.footer {
	border-top: 1px solid #dad8d8;
	background-color: #fff;
	padding: 0 20px;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 20px;
	text-align: center;
}

Let’s discuss the main topic directly without discussing other non-relevant styles.

  • We have set the .wrapper display style to flex and set the flex-direction to column to make all sections are displayed vertically.
  • Here we have also set min-height: 100vh;. It means the .wrapper item minimum height always same as full viewport height.
  • In .content, we have set flex-grow: 1;. According to MDN, flex-grow helps to assign remaining space in the flex container. So the .content section will cover the remaining spaces.

Conclusion

I think this method will help you to fix the footer at bottom of a page. That’s all for today’s tutorial. If you have any questions please comments below.

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment