How To Properly Set The 100% Div Height To Match Document/window Height?

I have a wrapper positioned to center with an y-repeated background image:

...some content

#wrappe

Solution 1:

I figured it out myself with the help of someone's answer. But he deleted it for some reason.

Here's the solution:

1. remove all CSS height hacks and 100% heights
2. Use 2 nested wrappers, one in another, e.g. #wrapper and #truecontent
3. 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)

4. Listen on (window).resize event and ONLY apply inline CSS height IF the viewport is larger than the height of #truecontent, otherwise keep intact

   $(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');
           }
   
       })          
   });
   

Solution 2:

The easiest way is to add the:

$('#ID').css("height", $(document).height());

after the correct page height is determined by the browser. If the document height is changed once more re-run the above code.

Solution 3:

You could make it absolute and put zeros to top and bottom that is:

#fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}

Solution 4:

simplest way i found is viewport-height in css..

div {height: 100vh;}

this takes the viewport-height of the browser-window and updates it during resizes.

see "can i use" for browser compatibility list

Solution 5:

html, body {
    height:100%;
}
#wrapper {
    min-height:100%;
}