How to properly set the 100 DIV height to match document window height

Question

I have a wrapper positioned to center with an y-repeated background image    lt body gt       lt div id  wrapper  gt             some content      lt  div gt   lt  body gt    wrapper  width  900px  margin  0 auto 0 auto  background-image  url image jpg  250px 0px repeat-y      Problem  when the window size is higher than the wrapper s height inherited from its content  the image obviously doesn t repeat on y-axis all the way to the bottom of the window   I ve used jQuery to dynamically apply inline CSS style to the wrapper according to actual document height  when DOM is ready and on window resize event      function            wrapper   css   height     document  height     px           window  resize function                wrapper   css   height     document  height     px                   The problem with this approach is that every time one extends the window height to a size larger than the previously resized largest size  the document height extends by this difference  essentially making the wrapper DIV infinite if you keep resizing the window infinitely and have a infinite vertical display space   On a typical 30  inch display with 1600px height  when user opens the website with a window height 1000px and wrapper is 800px high  the jQuery above sets the height to 1000px tiling the background image correctly  At this point  once the user extends the window size to e g 1400px  the 1400px is a new document size  remembered default  and doesn t update itself even if the user resizes his window back to the original 1000px height  adding 400px to the scrollbar height at the bottom   How to fix this   UPDATE   window  height doesn t seem to work  because window height is a viewport height  When your viewport is smaller than the content and you scroll it  the wrapper always stays the size of the viewport and doesn t extend to the bottom of the current viewport position

User · Answer

You could make it absolute and put zeros to top and bottom that is    fullHeightDiv       position  absolute      top  0      bottom  0

User · Answer

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

User · Answer

why don t you use width  100  and height  100

User · Answer

Use  element  height 100vh   This will set the height of the  element to 100  of viewport  Hope this helps

User · Answer

hows this   lt style type  text css  gt   wrapper  width  900px  margin  0 auto 0 auto  background  url  image JPG   250px 0px repeat-y     lt  style gt   lt script src  http   code jquery com jquery min js  gt  lt  script gt   lt script type  text javascript  gt   function handleResize     var h     window  height                wrapper   css   height  h  px         function            handleResize               window  resize function            handleResize                 lt  script gt   lt  head gt   lt body gt           lt div id  wrapper  gt                     some content          lt  div gt   lt  body gt

User · Answer

I figured it out myself with the help of someone s answer  But he deleted it for some reason   Here s the solution    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    function        var windowH     window  height        var wrapperH       wrapper   height        if windowH  gt  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  gt  truecontentH                    wrapper   css  height    newH   px

User · Answer

html  body       height 100      wrapper       min-height 100

User · Answer

this is how i answered that   lt script type  text javascript  gt      function resizebg                background   css  height     document  height                 window  resize function            resizebg                   document  scroll function            resizebg                   initial call     resizebg      lt  script gt    css    background  position absolute  top 0  left 0  right 0      so basically on every resizing event i will overwrite the height of the div in this case an image that i use as overlay for the background and have it with opacity not so colorful also i can tint it in my case with the background color   but thats another story

User · Answer

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

[jquery] How to properly set the 100% DIV height to match document/window height?

Examples related to jquery

Examples related to html

Examples related to css

Examples related to height