Introduction to Sticky Footer CSS
In CSS, when we create websites or web pages it has both a header and footer. Header and footer are the top and bottom parts of the page or any documents. In CSS, there are two types of headers and footers they can be either fixed or sticky which are used for positioning of header and footer. This sticky footer is used for the footer to stick to the bottom of the pages irrespective of the amount of content on the page. This sticky footer works only when the content of the page is short which means if there is enough space on the page to push the footer down to the page.
Working of the Sticky Footer in CSS
Sticky footer in CSS is used for styling the footer to stick at the bottom of the page.
Example:
Code:
<!doctype html>
<html lang="en">
<head>
<title>CSS Cookbook: sticky footer</title>
<style>
body {
background-color: #fff;
color: #333;
font: 6.2em / Arial;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
section {
height: 400px;
width: 600px;
}
.wrapper {
min-height: 120%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.page-header,
.page-footer {
background-color: cyan;
color: red;
padding: 30px;
}
.page-body {
padding: 40px;
}
.preview {
height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<header class="page-header">This is the header section </header>
<main class="page-body">
<p> In this section you will have main section of the content and if it has more content then the footer will be pushed down. </p>
</main>
<footer class="page-footer">Sticky footer section</footer>
</div>
</section>
</body>
</html>Output:
In the above example, we have .wrapper in which we have specified with a minimum height of 120% which takes the container height which is as tall as a container. In this above screenshot, we can see three different sections with a header, middle main content section, and footer sections.
Methods of Sticky Footer
Given below are the methods of sticky footer:
1. Creation of sticky footer using calc()method
This method is used for the creation of sticky footer when we even want to remove all the extra elements and also the height can be adjusted in the wrapper.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training </title>
</head>
<style>
body {
margin: 0;
height: 100%;
text-align: center;
font-family: sans-serif;
}
.wrapper {
min-height: calc(100vh - 70px);
}
footer {
height: 50px;
background: linear-gradient(70deg, #ae63e4, #47cf73);
}
</style><body>
<div class="wrapper">
<h1>CSS Sticky Footer with Calc()</h1>
</div>
<footer></footer>
</body>
</html>Output:
In the above example, we can see that this sticky footer works until the content is short else the footer is pushed downwards.
2. Creation of sticky footer using flexbox
As we know that maintaining the height of the content is the biggest task and having the footer that must be at the bottom is much more difficult. So this can be done using flexbox in CSS which makes it easy for spreading the content horizontally. If the properties of flexbox are familiar and we need to wrap the vertical portions in a flex container which must be specified and it automatically expands the space of the container if we are spreading it horizontally.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
</head>
<style>
body {
margin: 0;
height: 100%;
display: flex;
min-height: 100vh;
text-align: center;
flex-direction: column;
font-family: sans-serif;
}
.main-content {
flex: 1;
}
footer {
padding: 30px;
background: linear-gradient(70deg, blue, green, red, yellow);
}
</style>
<body>
<header>
<h1>CSS Sticky footer using flexbox </h1>
</header>
<main class="main-content">
<p>The main content can be written here.... </p>
</main>
<footer></footer>
</body>
</html>Output:
In the above example, we can see that we are using flex as the value for the display property. And if we know all the CSS properties for flexbox then it’s easy to use this flexbox for creating sticky footer.
3. Creation of sticky footer using grid value for display property
This is mainly used for implementing this sticky footer in CSS. But this is not more advisable as it’s not supported.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training </title>
</head>
<style>
body {
margin: 0;
height: 100%;
text-align: center;
font-family: 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, yellow, green, yellow, green);
}
</style>
<body>
<div class="main-wrapper">
<h1>CSS3 Grid to Create Sticky Footer</h1>
</div>
<footer></footer>
</body>
</html>Output:
In the above example, we can see that we have declared the display property with grid value which will have other different grid properties like grid-row-start, grid-row-end, color, etc.
Here we have seen sticky footer which is CSS property and is not much supported by all the browsers. Some of them are Firefox, Google Chrome, Opera, etc.
Conclusion
In this article, we conclude that sticky footer is one of the types of the footer in CSS. This footer property uses a fixed or sticky footer in CSS. We saw that this sticky footer can be created using different methods such as using with calc() method attribute, creation of sticky footer using flexbox which can help the content of the layout to spread horizontally and vertically, creation of sticky footer using grid value as display property. Here we saw each method with examples.
Recommended Articles
This is a guide to Sticky Footer CSS. Here we discuss the introduction to Sticky Footer CSS with the working of the sticky footer and methods. You may also have a look at the following articles to learn more –
