- remove all CSS height hacks and 100% heights
- Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
- Get the height of a browser viewport. IF it’s larger than #wrapper, then set inline CSS for #wrapper to match the current browser viewport height (while keeping #truecontent intact)
- Listen on (window).resize event and ONLY apply inline CSS height IF the viewport is larger than the height of #truecontent, otherwise keep intact
[js]$(function(){
var windowH = $(window).height();
var wrapperH = $(‚#wrapper‘).height();
if(windowH > wrapperH) {
$(‚#wrapper‘).css({‚height‘:($(window).height())+’px‘});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $(‚#wrapper‘).height();
var differenceH = windowH – wrapperH;
var newH = wrapperH + differenceH;
var truecontentH = $(‚#truecontent‘).height();
if(windowH > truecontentH) {
$(‚#wrapper‘).css(‚height‘, (newH)+’px‘);
}})
});[/js]
Full Height jQuery Elemente
Facebook
Twitter
LinkedIn
