Skip to content
Related Articles

Related Articles

How to create footer to stay at the bottom of a Web page?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 09 Aug, 2022
Improve Article
Save Article

To create a footer to stay at the bottom of a web page We can fix the position of it at the bottom of the webpage so that, if you scroll down that webpage you can still view the footer from any position at the page. To make a footer fixed at the bottom of the webpage, you could use position: fixed. Syntax:

#footer {
   position: fixed;
   bottom: 0;
   width: 100%;
   height: 60px;   /* Height of the footer */
   background: #6cf;
}

Example: 

html




<html>
 
<head>
    <style>
        #footer {
            position: fixed;
            padding: 10px 10px 0px 10px;
            bottom: 0;
            width: 100%;
            /* Height of the footer*/
            height: 40px;
            background: grey;
        }
    </style>
 
    <head>
 
        <body>
            <center>
                <div id="container">
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <h1>GeeksforGeeks</h1>
                    <div id="footer">This is a footer.
                    This stays at the bottom of the page.
                </div>
                </div>
            </center>
        </body>
        <html>

Output:

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!