Open In App

How To Create a Fixed Footer ?

Last Updated : 22 Feb, 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.

Using position: fixed;“ 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.



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads