CSS Sticky Footer Margin
I do NOT want a FIXED footer, I need a STICKY footer.
Сначала мой липкий нижний колонтитул работал нормально, но когда содержимое находится на определенной высоте, между нижним колонтитулом и нижней частью страницы есть поле.
Попробуйте поэкспериментировать с высотой браузера и высотой содержимого контента, и вы должны увидеть, в чем проблема.
Это оставляет неловкое поле между нижним колонтитулом и нижней частью страницы.
Заранее спасибо.
CSS Code:
html, body {
height:100%;
margin:0;
}
body {
color:#FFF;
font:16px Tahoma, sans-serif;
text-align:center;
}
a {
text-decoration:none;
}
#wrapper {
height:100%;
margin:0 auto;
min-height:100%;
padding-bottom:-30px;
width:985px;
}
#content {
background:#F00;
height:950px;
}
#footer {
background:#000;
border-top:1px solid #00F0FF;
clear:both;
height:30px;
margin-top:-30px;
padding:5px 0;
width:100%;
}
#footer span {
color:#FFF;
font-size:16px;
padding-right:10px;
}
#push {
clear:both;
height:30px;
}
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Bad Footer</title>
<link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
<span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
</div>
<div id="push"></div>
</div>
<div id="footer">
<a href=""><span>About Us</span></a>
<span> | </span>
<a href=""><span>Contact Us</span></a>
<span> | </span>
<a href=""><span>Home</span></a>
</div>
</body>