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
<body>
<div id="bg1" class="bg">top</div>
<div id="content">
help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>
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);
}
I feel like there should be a no javascript solution, but how is this?
$(window).resize(function() {
$('#content').height($(window).height() - 46);
});
$(window).trigger('resize');
To see the window height while (or after) it is resized, try it:
$(window).resize(function() {
$('body').prepend('<div>' + $(window).height() - 46 + '</div>');
});
The cleanest solution - also purely CSS - would be using calc and vh.
The middle div's heigh will be calculated thusly:
#middle-div {
height: calc(100vh - 46px);
}
That is, 100% of the viewport height minus the 2*23px. This will ensure that the page loads properly and is dynamic(demo here).
Also remember to use box-sizing, so the paddings and borders don't make the divs outfill the viewport.
Okay, how about a CSS answer! We use display: table. Then each of the divs are rows, and finally we apply height of 100% to middle 'row' and voilà.
body { display: table; }
div { display: table-row; }
#content {
width:450px;
margin:0 auto;
text-align: center;
background-color: blue;
color: white;
height: 100%;
}
Source: Stackoverflow.com