I'm having an issue identical to this poster:
Jquery problem with height() and resize()
But the solution doesn't fix my issue. I have three stacked divs, and I want to use JQuery to make the middle one adjust in height to 100% of the window height, minus the height (23px * 2) of the other top & bottom divs. It works on resize, but it's off (short) by 16px when the document initially loads.
HTML
help me. seriously.
CSS
html,
body {
width:100%;
height:100%;
}
.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}
#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}
#content {
width:450px;
margin:0 auto;
text-align: center;
}
JQuery
$(document).ready(function(){
resizeContent();
$(window).resize(function() {
resizeContent();
});
});
function resizeContent() {
$height = $(window).height() - 46;
$('body div#content').height($height);
}