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
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!
$(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');
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());
});????
Off the top of my head:
$('#content').height(
$(window).height() - $('#header').height() - $('#footer').height()
);
Is that what you mean?
Source: Stackoverflow.com