Do you have your website with thin content and want to make footer fixed at the bottom? If that is the case than a simple CSS sticky footer is the best solution.
If a site or webpage has few pieces of content than it will look ugly because there is much white space between the content area and a footer.
The solution of such a problem is sticking the footer area at the bottom of a page, no matter of screen size.
The reason for a CSS sticky footer is that it “sticks” the bottom area of the website to fixed at the bottom of the browser window.
Have a thin page content didn’t show the footer at the bottom of the page right? It’s happening on all kind of screen resolutions, whether the screens are small or large. To overcome such issues, we need a Sticky Solution.
It works when we sticky the footer at the bottom of the page, and the footer will always stay at the bottom of the page even content is less or more.
But the sticky isn’t required always. If the page has good enough content to the full fill the content area according to screen size, then you may don’t need to it.
There are many way to fixed the footer and one of way Flexbox Sticky Footer which can be created using flex CSS property.
Anyway, I will provide you a solution which should work on all major browsers such as Firefox, Chrome, and IE, etc.
Our solution work with pure CSS and HTML and you don’t need to add any Js code. We will use a few CSS classes and minimal HTML markup.
This is immaculate, modern, straightforward and without hacks. It will push footer to down by adjustable body height.
How to Create Simple CSS Sticky Footer
To make a fixed footer, we just need three things to follow. First, we need to set min-height 100% for a body HTML according to an element with position relative.
Next thing, The margin-bottom of body element according to the height of the footer.
For example, if you want footer height 100px then margin-bottom also be 100px.
Finally, The footer needs to add position absolute with left and right zero. That’s It!
The HTML
Here is a simple HTML code example. As you can see, It simply just has a header, content div, and HTML5 footer element.
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div class="content">
<section role="main">
<!--Content Here-->
</section>
</div>
<footer>Footer Area</footer>
</body>
</html>
The CSS
We will need to set the position relative and set the min-height to 100% for the body element, and then the body will have margin-bottom according to a height of the footer.
The content area needs to do some stylish according to our design requirements. We have added some styling elements in the footer class which you can change as you want.
These changes just only to make the design of footer and make it look good. It can be different according to your website design.
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
font-family: sans-serif;
}
.content {
padding: 15px;
box-sizing: border-box;
text-align: center;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
color:#FFFFFF;
background: #06303A;
font-size:1.5em;
text-align: center;
line-height:100px;
}
The footer HTML5 element requires position absolute with left and bottom should be at zero value. The next thing, of course, the height should be equal to margin-bottom which we set for the body.
The other styles are general which can be changed as you want. I added the background color, text-align, and line-height to show you the proper demo presentation.
Few Other Fixed Footer at Bottom Solutions
There are three other solutions are available on the internet. May some people prefer to use one of them. So I am going to share you with example code.
1. Using Push Technique
There is well known Ryan Fait’s sticky footer solution. But this solution requires some extra div and add an element push.
This solution using.!important This means it’s more complicated and little time taking to understand and quick use.
The Markup
Let’s have a look at the code example of this method here.
<body>
<div class="wrapper">
<!--content-->
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
The CSS
They used a height of 100% for both HTML and body element. The min-height is also 100% for the wrapper. The value of margin-bottom for wrapper should be equal to the height of the footer element.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
2. Using Negative Margin Top
There is another great solution called negative margin. This solution is similar to Ryan Fait’s solution but with a better result.
It is also using the same old technique by adding min-height 100% to class wrapper Let’s have a look at the HTML code example.
The HTML
<body>
<div class="wrapper">
<div class="content-area">
content
</div>
</div>
<footer class="footer"></footer>
</body>
This method doesn’t require to add any extra push element but needs to add an additional wrapper around the main content area.
This method works by equaling the margin-top and padding bottom. The value of padding-bottom for the content-area should be equal to the margin-top of the footer element.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
}
.content-area {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
Both the above solutions are complex and not easy to understand well. But the solution we have provided you is very straightforward and minimal uses of the code.
Our solution is quite easy to implement. Hope you like our solution and Let’s see another latest method by using calc();
3. Using calc()
Another good way makes the footer sticky we can use calc() CSS property. This method doesn’t need any extra push element. Also, we don’t need any overlapping.
By using calc(), it’s an easy way to make the footer fixed at the bottom of the page. We only need two elements, one for content area and a second one in the footer.
<body>
<div class="content">
Content Area
</div>
<footer class="footer">Footer Area</footer>
</body>
We will use min-height value as calc(). It makes the content area div take the vertical height of the entire screen, minus 50 pixels of the fixed height of the footer.
.content {
min-height: calc(100vh - 40px);
}
.footer {
height: 40px;
}
If your query over the Google for “CSS sticky footer” you will find some old techniques that don’t work well in latest web design.
We try to explain to you every method and give you another good solution for a keeping footer fixed at the bottom of the webpage. Hope you find this article useful resource.
Do you have any other solution for the footer? If so, and Want to share with other people? then Leave a comment in below comment section.
Demo appears to be broken (on my browser Brave)
Hi Josh!
I’m not sure why doesn’t Brave browser support absolute position for the footer. Please make sure each demo file loading properly in your browser.