Open In App

How To Create a Fixed Footer ?

Last Updated : 23 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

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.

html
<!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>GeeksforGeeks</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:


fixedPosition

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.

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.

HTML
<!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>GeeksforGeeks</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:


fixedPosition

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.



Similar Reads

How to create fixed/sticky footer on the bottom using Tailwind CSS ?
In this article, we are going to create a fixed/sticky footer on the bottom using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. With Tailwind CSS we can create a design by simply adding classes. Installation: Method 1: Install Tailwind via npm Step 1: npm
2 min read
How to create Grouped button footer using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Grouped button footer using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. &lt;link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/j
1 min read
How to create Basic footer markup using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic footer markup using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. &lt;link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jqu
1 min read
How to create bootstrap panel with footer ?
Bootstrap is a free open source tool for designing modern and responsive websites and web applications. It is the most popular tool for developing websites that are responsive and also beautiful. Bootstrap Panels are boxes with or without a border. You may want to put your contents inside some boxes for a unique design. So in this article, we will
2 min read
How to Create Sticky Header/Footer on a Web Page using HTML CSS and JavaScript ?
When designing a website, it's essential to consider the sticky header and footer. These elements enhance the user experience by keeping important navigation links accessible as users scroll. This article explores creating sticky headers and footers with CSS. We can do this by using the following CSS propertiesPosition: sticky; is a CSS property th
7 min read
How to create a simple Responsive Footer in React JS ?
A responsive Footer in the React JS application is part of webpages that adjusts layout dynamically and signals to the user that they have reached the end of the webpage and provides useful links to other areas of the website that the user may want to visit. Preview Image of Final Output: Prerequisites Node Package Manager &amp; npm ReactJS Environ
4 min read
How to create sticky footer in ReactJS ?
Creating a sticky footer in React jS is a common requirement when designing web applications or websites. A sticky footer remains fixed at the bottom of the screen, regardless of the content's height. In this article, we will see how to create a sticky footer in ReactJS. Prerequisites:NPM &amp; Node.jsReact JSCSS Positioning ElementSteps to Create
2 min read
How to create a Simple Footer using Bootstrap 5 ?
Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The &lt;footer&gt; tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bootstrap Grid System with CSS, and by using Bootstr
4 min read
How to Create a Multi-Column Footer in Bootstrap ?
Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and responsive across various devices is easy. Approach:
3 min read
How to Create a Sticky Footer in Bootstrap ?
In any webpage footer is the section that occurs at the end of the page. In many web pages, we can see that footers are sticky which means that whether we scroll up or down the page the footer will stay in its place which is at the bottom of the page. How to implement a sticky footer using BootstrapIn Bootstrap, there are predefined classes given a
5 min read