html - 如何获得高度 :100% div in a height:auto div?

Question

这是我的 HTML:

<div id="container">
    <div id="red"></div>
    <div id="yellow">
        <div id="green"></div>
    </div>
</div>

这是我的 CSS:

#container { height:auto; width:100%; background:orange; float:left; }
#red       { height:100%; width:200px; background:red; float:left; position:relative; }
#yellow    { height:100%; width:calc(100% - 210px); background:yellow; float:right; position:relative; padding:5px; }
#green     { height:300px; width:100%; background:green; }

这是一个示例:https://jsfiddle.net/cc5xL660/

在 jsfiddle 中，#red div 是不可见的。我正在寻找一种方法来使 #red div 在没有特定 height 维度的情况下可见。当然，我可以给 #red div height:300px 但 #green div 应该是是动态的。我希望 #red div 具有相同的高度。

Answer 1

你必须给

• position: relative to #container
• position: absolute 到 #red

您的 JSFiddle 已编辑:https://jsfiddle.net/cc5xL660/4/