CSS Sticky Footer Margin

Question

Aug 08, 2012, 05:44 PM

CSS Sticky Footer Margin

Nie chcę stopki FIXED, potrzebuję stopki STICKY.

Moja lepka stopka działała na początku dobrze, ale gdy zawartość jest na określonej wysokości, istnieje margines między stopką a dolną stroną.

Spróbuj bawić się wysokością przeglądarki i wysokością podziałów treści, a powinieneś zobaczyć, gdzie jest problem.

Pozostawia niewygodny margines między stopką a spodem strony.

Z góry dziękuję.

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

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