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

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

我认为你需要在 body 上设置一个 min-height 而不是 height..

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

我更新了fiddle：https://jsfiddle.net/oro2434d/

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

how to use min-height in child element with percentage?

html

css

height