Geek Answers Handbook

How to remove the space between the footer

I have a problem with CSS with a footer on my webpage. I used this article , but I have a blank space between the bottom and bottom of the page. Since there is no content in the body of my page, the empty space is still here, and if it is not needed, there is an additional scroll bar. I really don't know why this happened. I cleaned up the CSS so that there was no irrelevant code.

HTML:

<!doctype html> <html> <head> <link rel="stylesheet" href="style.css"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>My Page</title> </head> <body> <div id="container"> <div id="header"> <p> Header Content </p> <hr> </div> <div id="body"> Body Content </div> <div id="footer"><p id="copy">Copyright 2013</p></div> </div> </body>

And CSS:

 html, body {height: 100%} body { margin: 0px; padding: 0px; } #copy {vertical-align: bottom;text-align:center;font-family:Century Schoolbook;color:#8B0B04;font-size:14px;} #footer {bottom: 0;width:100%;position: absolute;height: 60px} #container {min-height: 100%;position: relative} #body {padding-bottom: 60px}

My browser is Firefox, but it doesn’t work in Chrome either. I will be so happy if you give me any feedback and help. Thanks!

EDITOR: I wrote something bad imho. I will send the whole page the next day. Thanks again for the feedback.

+4
source share
2 answers

Use overflow:hidden for container to remove scroller

 #container { min-height: 100%; position: relative; overflow: hidden; }

and padding-bottom for div body

 #body{ padding-bottom:20px; }

Demo here Demo with content

+2
source

Perhaps try this css instead of what you have there:

 html, body { height: 100% } body { margin: 0px; padding: 0px; } #copy { vertical-align: bottom; text-align:center; font-family:Century Schoolbook; color:#8B0B04; font-size:14px; } #footer { bottom: 0; width:100%; position: absolute; } #container { min-height: 100%; position: relative }
0
source

More articles:


All Articles