Problem mit der Implementierung von CSS Sticky Footer

Question

Jul 10, 2009, 11:29 PM

Problem mit der Implementierung von CSS Sticky Footer

Ich habe einige Probleme damit, dass der Sticky Footer auf meiner Site funktioniert. Wenn der Inhalt kleiner als das Fenster ist, sollte die Fußzeile am unteren Rand des Fensters bleiben und der tote Raum sollte mit einem div gefüllt werden. Ich denke derCSS Sticky Footer tut dies, aber ich kann den "Push Div" nicht dazu bringen, den Inhalt ganz nach unten zu drücken. Wie Sie sehen, ist mein Code nicht nur ein Body-Wrapper-Footer.

<body>
  <div id="banner-bg">
    <div id="wrapper">
      <div id="header-bg">
        <!-- header stuff -->
      </div> <!-- end header-bg -->
      <div id="content-bg">
        <div id="content">
          <!-- content stuff -->
        </div> <!-- end content -->
      </div> <!-- end content-bg -->
    </div> <!-- end wrapper -->
  </div> <!-- end banner-bg -->
</body>

body { 
    color:              #00FFFF;
    background-image:   url("Images/img.gif");
    font-size:          1em;
    font-weight:        normal;
    font-family:        verdana;
    text-align:         center;
    padding:            0;
    margin:             0;
}

#banner-bg {
    width:              100%;
    height:             9em;
    background-image:   url("Images/img2.gif"); background-repeat: repeat-x;
    position: absolute; top: 0;
}

#wrapper {
    width:              84em;
    margin-left:        auto; 
    margin-right:       auto;
}

#header-bg {
    height:             16em;
    background-image:   url("Images/header/header-bg.png"); 
}

#content-bg {
    background-image:   url("Images/img3.png"); background-repeat: repeat-y;
}

#content {
    margin-right:       2em; 
    margin-left:        2em;
}

Ich bin verwirrt darüber, wohin der CSS Sticky Footer-Code in meinem Fall gehen soll.

Edit, hier ist was ich habe und was ich machen möchte:Alternativtext http://bayimg.com/image/gacniaacf.jpg