Container DIV stretches when resizing but not when scrolling

Question

I have a main <div> which is centered on the screen and the height is the total size of the viewport height. When I resize the browser it works fine, but if I have content below the visible browser window and need to scroll down, the <div> becomes static and assumes the size it had when it was scrolled.

What needs to be changed here so that the container <div> resizes properly when scrolling?

.container1 {
    width: 80%;
    height: 100%;
    -webkit-box-shadow: 0px -1px 18px 1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px -1px 18px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px -1px 18px 1px rgba(0, 0, 0, 0.75);
    position: absolute;
    left: 10%;
    border: 1px;
    top: 0px;
    border-style: solid;
    border-color: black;
    background-image: url(../img/albg.png);
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: auto;
    z-index: -2;
}

Answer 1

Use min-height instead of height JsFiddle

min-height:100%;
/* height:100%; */

Answer 2

The issue here is that you're trying to use a percentage for height. Below is another SO article that explains in full detail why this doesn't work. Short answer if you use pixels or em's/rem's for height it will work, but not percentages.

If you're having an issue with the parent container not wrapping it's children, it's probably because you are floating elements in which case you can use the overflow property to force it to wrap. If the children elements are positioned absolutely then they are no longer considered part of the normal flow in the DOM and you will not be able to get the parent to respect it's height.

CSS – why doesn’t percentage height work?