Increase div's height above browser resolution with percentage

Question

I have the following css:

*{
  box-sizing:border-box;
}
html, body {
    height: 100%;
    min-height: 100%;
}
#container {
    width: 100%
    height: 100%
}
#div1 {
    width: 100%;
    height: 20%;
}
#div2 {
    width: 100%;
    height: 20%;
}
#div3 {
    width: 100%;
    height: 60%;
}

Html:

<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>

Let's say my browser resolution is 1280 width and 768 height.Container div's height is 100% of my viewport.And the sum of the 3 div's is also 100%.At this moment i have no vertical scrollbar,because the content doesn't exceed the viewport.

If i add some content inside ,the child divs will push each other and so a vertical scrollbar will show up because the total height of the content exceeds the viewport ( 768px height ).But the child divs also overlapps parent div,because it's set to be 100% of the browser size.

I need to find a way,to keep the container at 100% height of the viewport.Logically it should change it's size once with the viewport because it's set with dynamic measurements,but it doesn't.The container have 768px , but now ,because the content is bigger, the viewport value is another ( as an exampple: 900px height ) .

Answer 1

If i understand corectly,don't set any height value for the child divs.They should expand once the content grow,or you can just give a condition like a min-height.Also i suggest you to use vh,but only for the container.And if you want,you can set a width,i dont think it will cause any trouble,but keep it in mind that the divs will automatically have the full width of the parent div.

*{
  box-sizing:border-box;
}
html, body {
    height: 100%;
    min-height: 100%;
}
#container {
    width: 100%;
    height: 100vh;
}
#div1 {
    width: 100%;
}
#div2 {
    width: 100%;
}
#div3 {
    width: 100%;
}

The code above will make your container be 100% height of the viewport,and if your content it's bigger,the child divs will push each other and container div will be 100% height of the new viewport.