set div height using jquery (stretch div height)

I have 3 divs with ids header, content and footer. Header and footer has fixed height and they are styled to float on top and bottom. I want the middle content height calculated automatically with jquery. How can I make this possible??

#header {
    height: 35px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
}
#footer {
    h开发者_开发知识库eight: 35px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

---

well you can do this:

$(function(){

    var $header = $('#header');
    var $footer = $('#footer');
    var $content = $('#content');
    var $window = $(window).on('resize', function(){
       var height = $(this).height() - $header.height() + $footer.height();
       $content.height(height);
    }).trigger('resize'); //on page load

});

see fiddle here: http://jsfiddle.net/maniator/JVKbR/
demo: http://jsfiddle.net/maniator/JVKbR/show/

---

The correct way to do this is with good-old CSS:

#content{
    width:100%;
    position:absolute;
    top:35px;
    bottom:35px;
}

And the bonus is that you don't need to attach to the window.onresize event! Everything will adjust as the document reflows. All for the low-low price of four lines of CSS!

---

Off the top of my head:

$('#content').height(
    $(window).height() - $('#header').height() - $('#footer').height()
);

Is that what you mean?

---

You can bind function as follows, instead of init on load

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

---

$(document).ready(function(){ contsize();});
$(window).bind("resize",function(){contsize();});

function contsize()
{
var h = window.innerHeight;
var calculatecontsize = h - 70;/*if header and footer heights= 35 then total 70px*/ 
$('#content').css({"height":calculatecontsize + "px"} );
}

---

I think will work.

$('#DivID').height('675px');

---

This should probably work:

window.addEventListener('resize', function(event) {
    document.querySelector('#middle').style.height = 
    window.innerHeight - $('#header').height() + $('#footer').height() + 'px';
}, true);