Answered by:
a good footer code

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
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
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
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