溢出時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 ，可以使其具有彈性。 但是，現在的height: 100% .will-overflow height: 100%不起作用，因為如果沒有任何拉伸的方式， .one高度將為0； 所以我將height更改為1000px以模擬一些任意長度的內容。 將其更改為一個較小的值（如10px以檢查它仍然允許.one填充整個視口。

Answer 2

正確的高度是100％。

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

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