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:

    

        ...some content
    
&         


        

Answer 1

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

Answer 2

Use #element{ height:100vh}

This will set the height of the #element to 100% of viewport. Hope this helps.

Answer 3

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