Question

看看这个小提琴：https://jsfiddle.net/cz1gusj6/1/

我想要做的是这些条纹总是适合屏幕尺寸高度。

这是页面：http://cl.ly/image/0o0e1W0X0n2Z/1-browser.jpg

当我更改窗口高度时会发生这种情况：http://cl.ly/image/410z3E0l420K/2-browser.jpg

这是我希望在我改变窗口高度时发生的事情：http://cl.ly/image/0P3u1r0F2P1r/3-browser.jpg

我尝试为div分配一个max-height，但这不起作用，因为它不是图像的内容：

#container{
width: 100%;
height: 100%;
}

.container2{
max-height: 100%;
}

<div id="container">
<div class="container2">CONTENT (the bars)</div>
</div>

Answer 1

<强> jsBin demo

只需将条形设置为vh（视口高度）单位大小。

此外，您不能在一个页面内拥有多个ID！ id="progressbar"应该是唯一的！因此，请使用类 .。

由于您现在使用vh，请不要使用<br>代码，而应使用保证金（也在vh中）。
将进度条的子项设置为height:100%;（以填充父级高度）

Answer 2

如果您有固定数量的条形，请继续阅读（我使用10条作为示例）。

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

将container2更改为：

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

div内容的最大高度

3 个答案: