Easy Ways to Create Sticky Footer using HTML & CSS 3
Create sticky footer using CSS; sticky footer sticks to the bottom of the browser window as the name indicates. However, you need to keep in mind that it doesn’t happen all the time.
If the page has enough content, then it might push the footer further down. However, in the case of the page having little content, you will be able to keep the sticky footer using HTML and CSS attached to the bottom of the browser window.
Create Sticky Footer using Negative CSS Margin
The wrapping element always used to hold everything excluding the footer. It came with a negative margin which was the same as the footer height.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer</title>
</head>
<body>
<div class="wrapper">
<div class="main-content">
<h1>Sticky Footer with Negative Margin</h1>
</div>
</div>
<footer></footer>
</body>
</html>@import url("https://fonts.googleapis.com/css?family=Muli");
html,
body {
margin: 0;
height: 100%;
text-align: center;
font-family: "Muli", sans-serif;
}
.wrapper {
min-height: 100%;
}
.main-content {
padding-top: 20px;
padding-bottom: 50px;
}
footer {
height: 50px;
margin-top: -50px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}Example on Codepen
See the Pen
Create Sticky Footer with Negative Margin by Digamber (@singhdigamber)
on CodePen.
This has been an amalgamation of both the techniques. As we have noted, it makes use of unwanted HTML elements, thereby complicating it.
Recommended Tutorial
Create Sticky Footer Using CSS 3 calc() Attribute
If you want to get rid of all the extra elements, then you can adjust the height of the wrappers with CSS 3 calc(). As you can see, overlapping doesn’t occur any longer. To have 100% height, we just stacked two elements. This ensured a 100% height without any complication.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer</title>
</head>
<body>
<div class="wrapper">
<h1>Sticky Footer with Calc()</h1>
</div>
<footer></footer>
</body>
</html>@import url("https://fonts.googleapis.com/css?family=Muli");
html,
body {
margin: 0;
height: 100%;
text-align: center;
font-family: "Muli", sans-serif;
}
.wrapper {
min-height: calc(100vh - 70px);
}
footer {
height: 50px;
background: linear-gradient(70deg, #ae63e4, #47cf73);
}CSS Calc() Example on Codepen
See the Pen
Sticky Footer With Calc() by Digamber (@singhdigamber)
on CodePen.
You might have noticed the 50px fixed height vs. the 70px in the calc(). Here we are just making an assumption. We assume that the last item comes with a 20px bottom margin. We needed to subtract the sum of footer height and margin from the height of viewpoint height. As you can see the use of viewpoint units can be regarded as a little trick. As a result, you don’t need to set 100% body height before setting 100% wrapper height. In short, it gets rid of a sophisticated approach.
As we have already discussed, we use CSS to make sure that footer always sticks to the bottom portion of the browser. So it doesn’t happen every time. The length of the content is a big factor here even though we use CSS for a sticky footer. As you can see CSS works fine as long as the content is short. Else, it will push the footer down. We have learned a valuable lesson about sticky footer here.
Recommended Tutorial
Create Sticky Footer With CSS 3 Flexbox
As a web developer, you might have struggled with the same. You are making sure that the footer sticks to the bottom area are a task in itself. Moreover, you may have managed to work around this problem most of the time. However, all those solutions come with a shortcoming. None of these solutions work if you are clueless about the height of the footer. That’s what makes it a difficult task when it comes to CSS tricks for a sticky footer.
When you encounter this problem, you can turn to CSS3 Flexbox for help. For those who are familiar with CSS3 Flexbox property, it is well suited for spreading the content horizontally. However, you need to be aware of the fact that it works very well in the case of vertical layout problems as well.
To work with this problem, you need to wrap the vertical portions in a flex container. Then you will have to decide on which ones you will be expanding. All the available space will be instantly occupied in the container.
Let’s take a look at the example for sticky footer below. We have set the container as per the height of the window. Also, the content area will be expanded as per the need.
One thing you need to keep in mind is that you need to specify the container height in the case of the vertical direction. It’s not the case when it comes to horizontal direction, as it expands automatically to occupy the space.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer</title>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main class="main-content">
<p>Content goes here...</p>
</main>
<footer></footer>
</body>
</html>@import url("https://fonts.googleapis.com/css?family=Muli");
html,
body {
margin: 0;
height: 100%;
display: flex;
min-height: 100vh;
text-align: center;
flex-direction: column;
font-family: "Muli", sans-serif;
}
.main-content {
flex: 1;
}
footer {
padding: 30px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}CSS 3 Flexbox Sticky Footer Example on Codepen
See the Pen
Sticky Footer with CSS Flexbox by Digamber (@singhdigamber)
on CodePen.
Use CSS3 Display Grid to Create Sticky Footer
You have newer technique like grid layout also to help you with this problem. However, it is not widely supported. That’s the advantage with CSS3 flexbox. You will find it really to implement in the case of sticky footer.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer</title>
</head>
<body>
<div class="main-wrapper">
<h1>CSS3 Grid to Create Sticky Footer</h1>
</div>
<footer></footer>
</body>
</html>@import url("https://fonts.googleapis.com/css?family=Muli");
html,
body {
margin: 0;
height: 100%;
text-align: center;
font-family: "Muli", sans-serif;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
footer {
grid-row-start: 2;
grid-row-end: 3;
padding: 30px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}CSS 3 Grid, Sticky Footer Example on Codepen
See the Pen
CSS3 Grid to Create Sticky Footer by Digamber (@singhdigamber)
on CodePen.
This demo is supposed to work in Firefox Developer Edition or Chrome Canary. In case of Edge, you may backport to the previous version of grid layout.
Recommended Tutorial
