Keeping a div at full height when it doesn't fit in viewport

Question

My goal is a centered content wrapper which extends to the full height of the page at any time. So far my CSS works if all the content fits into the viewport, but if it doesn't then the div stops after the initial viewport height.

html, body {
    height:100%;
}

div {
    position: relative;
    width: 200px;
    height: 100%;
    margin: 0 auto 0 auto;
    background-color: #FAA
}

demo 1: https://jsfiddle.net/86j3qshr/1/

If you leave out the weight attribute at the div tag then it works as long as the content overflows the viewport. Otherwise the div isn't at full viewport height.

demo 2: https://jsfiddle.net/86j3qshr/2/

Answer 1

Use the min-height property rather than the height property.

When you set height: 100% on the element with the background, it will have a height of 100% of the parent element. Since the parent element's height is equal to the height of the viewport, it won't work as expected. Since you don't want the element's maximum height to be the same as the viewport, a min-height work better.

Updated Example

div {
    position: relative;
    width: 200px;
    min-height: 100%;
    margin: 0 auto;
}

As a side note, you can also use viewport-percentage units:

Example Here

div {
    position: relative;
    width: 200px;
    min-height: 100vh;
    margin: 0 auto;
}