如何在帶有百分比的子元素中使用最小高度？

Question

我想根據＃child_2的內容呈現HTML（ https://jsfiddle.net/xhtp70e6/ ）

<div id="parent">
    <div id="child">
        <div id="child_1"></div>
        <div id="child_2">
            Content
        </div>
    </div>
    <div id="child2"></div>
</div>

html, body { height: 100%; }
#parent { width: 50px; height: 1px; min-height: 100%; }
#child { width: 50px; height: 1px; min-height: 80%; background-color: blue; }    
#child_1 { height: 50%; background-color: black; }
#child_2 { min-height: 50%;  background-color: pink; }
#child2 { width: 50px; height: 20%;  background-color: orange; }

當內容短時，文檔將完全呈現到頁面上。 （如上述示例）

但是當內容很長時，它不會顯示整個＃child_2的內容。 （ https://jsfiddle.net/mrdkvvbn/）＃child2的內容在＃child_2的內容上遞增而沒有下降。

<div id="parent">
    <div id="child">
        <div id="child_1"></div>
        <div id="child_2">Content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
    </div>
    <div id="child2"></div>
</div>

我該如何解決？ 請幫我 ！

Answer 1

我認為您需要在身體上設置最小高度而不是高度。

html { height: 100%; }
body { min-height: 100%; }

我更新了小提琴： https : //jsfiddle.net/oro2434d/