set div height using jquery (stretch div height)

Question

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 {     height: 35px;     width: 100%;     position: absolute;     bottom: 0px;     z-index: 2; } 

Thanks in advance...:)

blasteralfred

Answer 1

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/

Answer 2

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!