Menu
I've got CSS issue with footer on my webpage. I've used this article, but I've got empty space between footer and bottom of the page. Since there is no content in the body of my page the empty space is still here and there is an additional scrollbar when it's not needed. I really don't know why it's there. I've cleaned the CSS so there isn't any 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 in Chrome this doesn't work too. I will be so happy if you will give me any feedback and help. Thanks!
EDIT: I've posted something wrong imho. I will post the whole page next day. Again thanks for feedback.
577
Use overflow:hidden for container for removing the scroller
#container {
min-height: 100%;
position: relative;
overflow: hidden;
}
and padding-bottom for body div
#body{
padding-bottom:20px;
}
Demo and here is Demo with content
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
