CSS Sticky Footer Margin

Question

Aug 08, 2012, 05:44 PM

CSS Sticky Footer Margin

NO quiero un pie de página FIJO, necesito un pie de página STICKY.

Mi pie de página pegajoso funcionó bien al principio, pero cuando el contenido está a una cierta altura, hay un margen entre el pie de página y la parte inferior de la página.

Intenta jugar con la altura del navegador y la altura del contenido div, y deberías ver dónde está el problema.

Deja un margen incómodo entre el pie de página y la parte inferior de la página.

Gracias de antemano.

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>