blasteralfred Ψ blasteralfred Ψ - 4 months ago 15
jQuery Question

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


Thanks in advance...
:)


blasteralfred

Answer

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/