ADVERTISEMENT
ADVERTISEMENT

How to set the sticky footer at the bottom of a webpage using CSS?

Here, we are going to learn how to set the sticky footer at the bottom of a webpage using CSS (Cascading Style Sheet)?
Submitted by Anjali Singh, on February 23, 2020

Introduction:

We know various things regarding web development, don't we? But do we know it all? The answer might be no. That is nothing to feel embarrassed about as it is just natural that one cannot know everything, moreover when you are just a beginner. Therefore, one must keep learning as much as one can. Learning various properties would help you grow as a web developer exponentially. A good and professional developer is the one who keeps on learning new things and implement those learnings in the development of websites or web pages. So if you aim to be a good developer never stop learning new methods, properties, functions, etc. Thus, on that note let us learn something new in this article and that is setting the footer at the bottom of the website or web page.

We know various things regarding web development, don't we? But do we know it all? The answer might be no. That is nothing to feel embarrassed about as it is just natural that one cannot know everything, moreover when you are just a beginner. Therefore, one must keep learning as much as one can. Learning various properties would help you grow as a web developer exponentially. A good and professional developer is the one who keeps on learning new things and implement those learnings in the development of websites or web pages. So if you aim to be a good developer never stop learning new methods, properties, functions, etc. Thus, on that note let us learn something new in this article and that is setting the footer at the bottom of the website or web page.

The footer in CSS can stick at the bottom of the webpage in the same manner that the navigation bar sticks on the top of the page. It's always there on the bottom of the page, no matter how much you scroll down the webpage? It is always visible on every page. Not just that, it is a good practice to include footers in the websites or web pages. It makes your website or web page appear to be very professional and organized. Normally the website footer is useful to add additional information and navigation options at the end of the web page.

So, let us continue this discussion of setting the footers at the bottom of the webpage.

Solution:

To create a footer to stay at the bottom of a web page in CSS all you need to do is set the position to fixed, so that the footer is fixed at one position even if you scroll the web page and set the bottom to 0 so it is fixed at the bottom of the web page exactly how we wanted.

Syntax:

element{
	position:fixed;
	bottom:0; // other CSS properties
}

Example:

<html>

<head>
    <style>
        iframe {
            height: 300px;
            width: 900px;
            background-color: blue;
        }
        
        .footer {
            position: fixed;
            padding: 10px 10px 0px 10px;
            bottom: 0;
            width: 100%;
            height: 30px;
            font-size: 20px;
            background: #f40;
            color: #fff;
            text-align: center;
        }
    </style>

    <head>

        <body>
            <h1>IncludeHelp</h1>
            <iframe src="https://www.includehelp.com/" frameBorder="0"></iframe>
            <div class="footer">This is IncludeHelp</div>
        </body>
        <html>

Output

CSS | How to fix the fotter at bottom in a webpage

In the above example, the colored DIV that contains "This is IncludeHelp" is at the footer which is at the bottom of the page.

Words of advice:

That was easy, right? The most important thing in setting the footer is what you want to include in your footer. As you do not want anything redundant to be displayed on the footer, so it is very crucial what you decide as a footer.

CSS Tutorial & Examples »


ADVERTISEMENT




ADVERTISEMENT



Comments and Discussions!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.