CSS高度100％在溢出时不起作用

Question

使用此代码发生了什么：

HTML 的

<div class="one">

    <div class="will-overflow">
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.one {
    height: 100%;
    background: red;
}

.one .will-overflow {
    width: 20%;
    height: 2000px;
    background: blue;
}

我得到这样的结果：

演示

http://jsfiddle.net/kM46e/

问题

无论如何都要扩展div.one高度以适应 div.will-overflow 。这只是一个例子，该div的内容是动态的。

Answer 1

html, body {
    width: 100%;
    height: 100%;
}

.one {
    min-height: 100%;
    background: red;
}

.one .will-overflow {
    width: 20%;
    height: 1000px;
    background: blue;
}

将.one＆＃39; height更改为min-height，即可让它变得有弹性。但是，现在height: 100%的{​​{1}}无法正常工作，因为没有任何内容可以延伸，.will-overflow的高度为0;所以我将.one更改为height以模拟一些任意长度的内容。将其更改为较小的值，例如1000px，以检查它是否仍允许10px填充整个视口。

Answer 2

高度正确为100％。

.one .will-overflow {
    width: 20%;
    height: 120%;
    background: blue;
}

http://jsfiddle.net/kM46e/1/