div内容的最大高度

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
}