locked
a good footer code RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    User702049738 posted

    Thanks a lot man

    Tuesday, February 27, 2018 11:40 PM