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.
CONTENTS
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.wrapperwraps the header, content and footer section. - The
.headersection will show at the top of the page. .contentwill hold the all page contents.- This
.footersection 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
.wrapperdisplay style to flex and set theflex-directionto column to make all sections are displayed vertically. - Here we have also set
min-height: 100vh;. It means the.wrapperitem minimum height always same as full viewport height. - In
.content, we have setflex-grow: 1;. According to MDN, flex-grow helps to assign remaining space in the flex container. So the.contentsection 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.
This is awesome. It worked beautifully. Thanks