stretch div with top and bottom margins - css/css3

I have a page with divs as below;

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="wrap2"></div>
        <div id="wrap"></div>
    </div>
    &l开发者_JS百科t;div id="footer"></div>
</div>

I have specific height for wrap2 and i want wrap to fill the area below wrap2 , but above footer. You can see the fiddle here. I want to stretch wrap in between wrap2 and footer. I am looking for a pure css solution.

How can I do this?

You can't with pure CSS. This is perhaps the single biggest complaint about CSS. The most accurate option would be to use JavaScript. On onload and onresize call a JS function that grabs the height of the viewport, subtracts the height of your footer and header, then sets the height of your div to fill in the rest.

I solved it by setting padding-bottom: 31px; for #content and by setting a 100% height for wrap.

You can see the result fiddle here

Thanks @DA, @Jaspero and @Ima Student