CSS Sticky Footer Margin

Question

Aug 08, 2012, 05:44 PM

CSS Sticky Footer Margin

Ich möchte KEINE FIXED-Fußzeile, sondern eine STICKY-Fußzeile.

Meine klebrige Fußzeile hat anfangs einwandfrei funktioniert, aber wenn sich der Inhalt in einer bestimmten Höhe befindet, befindet sich ein Rand zwischen der Fußzeile und dem unteren Rand der Seite.

Versuchen Sie, mit der Höhe des Browsers und der Höhe des Inhalts-Divs herumzuspielen, und Sie sollten sehen, wo das Problem liegt.

Es bleibt ein unangenehmer Rand zwischen der Fußzeile und dem unteren Rand der Seite.

Danke im Voraus.

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 Quelltext:

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