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;
}

score 2 · Answer 1 · answered Jan 13 '16 at 15:36

2

Use min-height instead of height JsFiddle

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

answered Jan 13 '16 at 15:36

NicolaPasqui

1,112
8
17

The result is the same with min-height – John Rose Jan 13 '16 at 15:40
have you removed the "height:100%" rule ? please have a look at my JsFiddle – NicolaPasqui Jan 13 '16 at 15:58
Yes, I replaced it with the min-height value. Maybe the problem is in the subsequent divs I have there? Thank you for the quick reply btw – John Rose Jan 13 '16 at 16:19
are there children divs with float or position:absolute; ? could you post the children divs css ? – NicolaPasqui Jan 13 '16 at 16:28

score 1 · Answer 2 · answered Apr 16 '18 at 15:20

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?

Container DIV stretches when resizing but not when scrolling

2 Answers2