How To Create a Fixed Footer ?
A fixed footer in web design refers to a footer element that remains stationary at the bottom of the viewport, regardless of scrolling. It provides consistent navigation, contact information, or other details across all pages of a website.
These are the following methods to Fix the Footer at the bottom of the webpage.
Using Position Fixed for Fixed Footer
In CSS positions the footer element relative to the Viewport, ensuring it remains fixed at the bottom of the screen even when the page is scrolled, providing a persistent footer across the website.
Position fixed for Fixed Footer Syntax
position: fixed;
Position fixed for Fixed Footer Example
In this example, we are using position: fixed property to fix the footer at the bottom of a webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70vh;
}
#footer {
position: fixed;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
height: 40px;
background: green;
color: white;
}
.html,
.css,
.javascript,
.react {
width: 50%;
border-radius: 5px;
margin: 14px;
padding: 10px;
border: 2px solid #CCC;
}
h1{
color: green;
}
</style>
</head>
<body>
<center>
<div id="container">
<h1>w3wiki</h1>
<div class="html"
style="background-color: skyblue; color: white;">
<h2>HTML</h2>
HTML stands for HyperText Markup Language.
It is used to design web pages using a
markup language. HTML is a combination of
Hypertext and Markup language.
Hypertext defines the link between web pages. A
markup language is used to define the text document
within the tag which defines the structure of web
pages. This language is used to annotate
(make notes for the computer) text so that a machine can
understand it and manipulate text accordingly.
</div>
<div class="css"
style="background-color: gray; color: white;">
<h2>CSS</h2>
CSS (Cascading Style Sheets) is a simply
designed language intended to simplify the
process of making web pages presentable.
CSS allows you to apply styles to HTML
documents. It describes how a webpag should look.
It prescribes colors, fonts, spacing,
etc. In short, you can make your website
look however you want. CSS lets developers and
designers define how it behaves, including
how elements are positioned
in the browser.
</div>
<div class="javascript"
style="background-color: orange; color: white;">
<h2>JavaScript</h2>
JavaScript is a lightweight, cross-platform,
single-threaded, and interpreted compiled programming
language. It is also known as the scripting language
for webpages. It is well-known for the developmentm
of web pages, and many non-browser
environments also use it.
</div>
<div class="react"
style="background-color: purple; color: white;">
<h2>React</h2>
Every front-end developer and web developer knows how
frustrating and painful it is to write the same
code at multiple places. If they need to add a button
on multiple pages they are forced to do a lot of
code. Developers using other frameworks face the
challenges to rework most codes even when crafting
components that changed frequently.
</div>
<div id="footer">
This is a footer.
This Fixed at the bottom of the page.
</div>
</div>
</center>
</body>
</html>
Output:
using position fixed
Explanation:
In the above-example we are following these steps
- Here Content sections styled with varying colors and heights using HTML/CSS classes.
- Footer positioned at the bottom of the page with position: fixed property in CSS.
- Position: fixed ensures the footer remains visible even during scrolling.
- This design maintains consistent footer visibility for improved user experience.
Using Position Sticky for Fxied Footer
In this approach, we are using position: sticky for getting the fixed footer. position: sticky in CSS combines behaviors of relative and fixed, initially relative then fixed once scrolled to a defined point.
Position Sticky for Fxied Footer Syntax
position: sticky;
Example for Sticky Footer
In this example we are using position: sticky to to fix footer at the bottom of a webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70vh;
}
#footer {
position: sticky;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
height: 40px;
background: green;
color: white;
}
.html,
.css,
.javascript,
.react {
width: 50%;
border-radius: 5px;
margin: 14px;
padding: 10px;
border: 2px solid #CCC;
}
h1{
color: green;
}
</style>
</head>
<body>
<center>
<div id="container">
<h1>w3wiki</h1>
<div class="html"
style="background-color: skyblue; color: white;">
<h2>HTML</h2>
HTML stands for HyperText Markup Language.
It is used to design web pages using a
markup language. HTML is a combination of
Hypertext and Markup language.
Hypertext defines the link between web pages. A
markup language is used to define the text document
within the tag which defines the structure of web
pages. This language is used to annotate
(make notes for the computer) text so that a machine can
understand it and manipulate text accordingly.
</div>
<div class="css"
style="background-color: gray; color: white;">
<h2>CSS</h2>
CSS (Cascading Style Sheets) is a simply
designed language intended to simplify the
process of making web pages presentable.
CSS allows you to apply styles to HTML
documents. It describes how a webpag should look.
It prescribes colors, fonts, spacing,
etc. In short, you can make your website
look however you want. CSS lets developers and
designers define how it behaves, including
how elements are positioned
in the browser.
</div>
<div class="javascript"
style="background-color: orange; color: white;">
<h2>JavaScript</h2>
JavaScript is a lightweight, cross-platform,
single-threaded, and interpreted compiled programming
language. It is also known as the scripting language
for webpages. It is well-known for the developmentm
of web pages, and many non-browser
environments also use it.
</div>
<div class="react"
style="background-color: purple; color: white;">
<h2>React</h2>
Every front-end developer and web developer knows how
frustrating and painful it is to write the same
code at multiple places. If they need to add a button
on multiple pages they are forced to do a lot of
code. Developers using other frameworks face the
challenges to rework most codes even when crafting
components that changed frequently.
</div>
<div id="footer">
This is a footer.
This Fixed at the bottom of the page.
</div>
</div>
</center>
</body>
</html>
Output:
using position: sticky;
Explanation:
Here is the explanation of above implementation.
- Content sections styled with various colors and heights are defined using HTML and CSS classes.
- The footer is anchored at the bottom of the page using CSS position: sticky property.
- Position: sticky keeps the footer visible while scrolling.
- This design provides consistent navigation and information placement throughout scrolling interactions.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Contact Us