javascript - 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 的 height 更改为 min-height，您可以使其具有 flex 。但是，现在 .will-overflow 的 height: 100% 不起作用，因为没有任何东西可以拉伸(stretch)它，.one 将具有高度的 0;所以我将 height 更改为 1000px 以模拟一些任意长度的内容。将其更改为较小的值，例如 10px，以检查它是否仍允许 .one 填充整个视口(viewport)。