locked
a good footer code RRS feed

  • Question

  • User702049738 posted

    Hello Experts;

    I have tried so many footer codes on the internet but I need one that works well. I need a footer that is fully black for my web page and I need it to be at the bottom of the page always. All help is appreciated.

    thanks

    Friday, February 23, 2018 10:15 PM

Answers

  • User2103319870 posted

    the posted footer doesn't work like the following found at this asp.net page, which is what i want

    https://www.asp.net/

    You can try with below code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <style>
          html,
        body {
           margin:0;
           padding:0;
           height:100%;
        }
        #container {
           min-height:100%;
           ;
        }
        #body {
           padding:10px;
           padding-bottom:60px;   /* Height of the footer */
        }
        #footer {
           ;
           bottom:0;
           width:100%;
           height:60px;   /* Height of the footer */
           background:#6cf;
        }
    </style>
    </head>
    <body >
     <div id="container" style="height:1500px;background-color:green">
       <div id="body">Body Content</div>
       <div id="footer">Footer Content</div>
    </div>
    </body>
    </html>

    Source URL : http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 27, 2018 3:53 PM

All replies

  • User2103319870 posted

    You can try with below css style. 

    #footer {
        background-color:black;
        height:10px;
        padding:10px;
        border-top:1px solid #ABABAB;
        ;
        left:0;
        bottom:0;
        width:100%
    }

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body style="height:1500px;background-color:green">
      <div id="footer" ><span style="color:white">This is test content</span>
       </div>
    </body>
    </html>
    Friday, February 23, 2018 10:30 PM
  • User702049738 posted

    thanks for the reply...just curious, the posted footer doesn't work like the following found at this asp.net page, which is what i want

    https://www.asp.net/

    Tuesday, February 27, 2018 12:58 AM
  • User2103319870 posted

    the posted footer doesn't work like the following found at this asp.net page, which is what i want

    https://www.asp.net/

    You can try with below code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <style>
          html,
        body {
           margin:0;
           padding:0;
           height:100%;
        }
        #container {
           min-height:100%;
           ;
        }
        #body {
           padding:10px;
           padding-bottom:60px;   /* Height of the footer */
        }
        #footer {
           ;
           bottom:0;
           width:100%;
           height:60px;   /* Height of the footer */
           background:#6cf;
        }
    </style>
    </head>
    <body >
     <div id="container" style="height:1500px;background-color:green">
       <div id="body">Body Content</div>
       <div id="footer">Footer Content</div>
    </div>
    </body>
    </html>

    Source URL : http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 27, 2018 3:53 PM
  • User702049738 posted

    Thanks a lot man

    Tuesday, February 27, 2018 11:40 PM