Margem de rodapé de CSS

Question

Aug 08, 2012, 05:44 PM

Margem de rodapé de CSS

Eu não quero um rodapé fixo, eu preciso de um rodapé STICKY.

Meu rodapé fixo funcionou bem no começo, mas quando o conteúdo está em uma certa altura, há uma margem entre o rodapé e a parte inferior da página.

Tente mexer na altura do navegador e na altura do conteúdo, e você deve ver onde está o problema.

Deixa uma margem desajeitada entre o rodapé e a parte inferior da página.

Agradeço antecipadamente.

Código CSS:

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

Código HTML:

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