CSS Footer Positioning Issue

Here is a preview of what I have so far:

The red area is part of the design an开发者_如何学运维d should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.

I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.

What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.

footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }

Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?

My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.

---

we use a sticky footer as well - here's the basics:

<div id="container">
  <div id="header">Header</div>
  <div id="nav">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
    </div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>

Note the clearfooter before the end of the container. Then with CSS you need something like this:

html, body {    
   height: 100%; 
}

#container {
   min-height: 100%;
   margin-bottom: -330px;
   position: relative;
}

.clearfooter {
   height: 330px;
   clear: both;
}

#footer {
   height: 330px;
   position: relative;
}

The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.

If you happen to need it to work in IE6 you'll need to target the container however you'd like and use:

#container {
   height: 100%;
}

Hope that helps!

---

Sticky footers can be tricky and adding an over lapping background can be even more tircky. What you might want to try is creating a Sticky footer and applying the background image to the body or container background repeating-x and position bottom.

Are you able to create a jsfiddle and I can show you the technique I mean.

---

When you are offsetting something with position: relative, the element still "reserves" the space it would have occupied otherwise - in your case, the bottom area where you get the whitespace. Set margin-bottom: -115px on your footer to tell it not to do that.