Max-height of div content - html

Question

Take a look at this fiddle: https://jsfiddle.net/cz1gusj6/1/
What i want to do is this bars to fit the screen size height, always.
This is the page: http://cl.ly/image/0o0e1W0X0n2Z/1-browser.jpg
This is what happens when i change the window height: http://cl.ly/image/410z3E0l420K/2-browser.jpg
This is what i want it to happen when i change the window height: http://cl.ly/image/0P3u1r0F2P1r/3-browser.jpg
I tried to assign a max-height to the div but that does not work because the content it's not images:
#container{
width: 100%;
height: 100%;
}
.container2{
max-height: 100%;
}
<div id="container">
<div class="container2">CONTENT (the bars)</div>
</div>

Answer 1

jsBin demo
Simply set your bars to a vh (viewport height) unit size.
Also you cannot have multiple ID inside a single page! id="progressbar" should be unique! So use class ..
Since you use vh now, don't use <br> tags, rather a margin (also in vh).
Set the Child of your progressbars to height:100%; (to fill the parent height)

Answer 2

If you have fixed number of bars, read on (I'm using 10 bars as an example).
DEMO: http://jsfiddle.net/8yrp8d9u/
HTML
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
CSS
html, body {
height: 100%;
}
body {
background: #4086a4;
margin: 0;
}
.progressbar {
margin: 0 auto;
width: 30%;
height: 10%;
box-sizing: border-box;
border: 10px solid #4086a4;
border-width: 5px 0;
background: #7aabbf;
}
.progressbar span {
display: block;
width: 0;
max-width: 100%;
height: 100%;
background: white;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#-webkit-keyframes progress {
from {} to {width: 100%}
}
#-moz-keyframes progress {
from {} to {width: 100%}
}
#-ms-keyframes progress {
from {} to {width: 100%}
}
#keyframes progress {
from {} to {width: 100%}
}

Answer 3

change container2 to:
.container2{
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0
}