footer on bottom of viewport without overlaping with content

What I need is a very basic layout with only 2 main parts: content and footer. The footer should always be on bottom of viewport. So I have:

• Content (position:relative)
• Footer (position: fixed; bottom:0px) That works grate when I have few content (see image 1).

The problem starts when the viewport is too short or have lots of content (see image 2).

The content goes behind the footer (overlaping) and the page scroll appears.

I don't want it to go in front either. What I would like is this (see image 3)

The content doesn't overlap with the footer, and the page scroll only scroll the content div.

I don't know how to accomplish that or even if it can be done. I don't mind using jquery and I don't care for ie6. Any help would be very appreciated

Thanks

EDIT:

Thanks for the reply's.

I'm uploading a couple of images so you can 开发者_如何学编程better understand what I need.

In image 1 http://estudioibarra.com/test/image1.jpg you can see the design I want, and in Image 2 http://estudioibarra.com/test/image2.jpg is the same image with some explanations.

What I want is the header always on bottom of viewport because is my menu. And I don't want the content to overlap with my menu. because the content will have more than 3 projects.

What I don't want is this http://estudioibarra.com/test/image3.jpg (content appearing behind menu).

With some of your solutions I can solve that, but only if I have a scroll in the container div. I really don't like that.

Is there to use the main page scroll to scroll the container content??

Thanks again for your time

---

How about simply making both content and footer position: fixed and place them however you want, like this demo: http://jsfiddle.net/bAtVE/?

#content {
    position: fixed;
    height: 85%;
    width: 95%;
    border: 1px blue solid;
    overflow-y: auto;
}

#footer {
    position: fixed;
    height: 10%;
    width: 95%;
    bottom: 0;
    border: 1px red solid;
}

---

<div id="content">
    here is content
</div>
<div id="footer">
    This is footer
</div>

EDIT:

I used position: absolute this time (see http://jsfiddle.net/bAtVE/1/). It is probably a better practice, as fixed position is not as cross-browser compatible.

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 85%;
    width: 100%;
    overflow-y: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 100%;
}

EDIT2:

http://jsfiddle.net/bAtVE/2/

---

In the example below footer will remain fixed even if you have an overflow of content in the parent element. Container dimensions can be dynamic and footer width will adjust accordingly. Footer is dependent on the container and not browser window unlike position:fixed. With jQuery you can do:

var cw = $('#container').innerWidth();

$('#header').css({
    'width': cw + "px"
});

$('#container').scroll(function() {
    $('#header').css({
        'bottom': -$('#container').scrollTop()
    })
})

Check working example at http://jsfiddle.net/M2n8Q/

---

What about just fixing the footer to the bottom and giving it a border-top the same color as the background?

body { background:#eeeeed; }
#wrap { width:34em; margin:0 auto; }
#head, #foot { padding:1em 2em; }
#head, #main { background:#fff; }
#main { padding:0 2em 6em; }
#foot {
    bottom:0;
    color:#fff;
    width:30em;
    position:fixed;
    background:#444;
    text-align:center;
    border-top:1em solid #eeeeed;
}

Demo: jsfiddle.net/Marcel/xgafM