For those seeking assistance, consider using height 100% instead of "Viewport Units" due to limited browser support.
View the Browser Support Table for Viewport Units: http://caniuse.com/#search=vh
If you wish to extend the div into scrollable areas beyond the viewport, implement the following code:
html{
margin:0;
padding:0;
border:none;
height:100%;
}
body {
margin:0;
padding:0;
border:none;
height:100%;
}
#wrapper-div {
min-height:100%;
}
The key is to set height to 100% on html and body, and min-height 100% on the wrapper div. The div will naturally expand 100% horizontally. Min and max width and height are widely supported in browsers, except for IE6. (Note: For IE6 support, a simple hack can be added to the wrapper-div, though it may not validate your CSS{*display:inline; *zoom:1;})
Check Browser Support for Min and Max Height and Width http://caniuse.com/minmaxwh
Experiment with both 100% and Viewport Units using this JSFiddle:http://jsfiddle.net/TalkingRock/ZHC5h/
If you opt for Viewport Units, use this code with width set as vw, not vh:
body {
margin:0;
height:100vh;
width:100vw;
}
#wrapper-div {
height:100vh;
width:100vw;
background-color:#cccccc;
color:#000000;
}
Reference this article for more insights:
- 1vw: 1% of viewport width
- 1vh: 1% of viewport height
- 1vmin: 1vw or 1vh, whichever is smaller
- 1vmax: 1vw or 1vh, whichever is larger