Wie bekomme ich eine Höhe: 100% div in einer Höhe: auto div?

Question

Hier ist mein HTML:

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

Hier ist meine 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; } 

Hier ist ein Beispiel: https://jsfiddle.net/cc5xL660/

Wie es in der jsfiddle ist, die #reddiv unsichtbar ist. Ich suche nach einer Möglichkeit, die #reddiv ohne eine spezifische height Dimension sichtbar zu machen. Natürlich könnte ich der #reddiv eine height:300px geben, aber die #green Div soll dynamisch sein. Ich möchte die #red Div die gleiche Höhe haben.

Answer 1

Sie haben zu geben

• position: relative #container
• position: absolute

Ihre JSFiddle bearbeitet #red: https://jsfiddle.net/cc5xL660/4/

Answer 2

Sie können display:flex verwenden, das zu tun. Werfen Sie einen Blick auf here

#container { 
 
    height: auto; 
 
    width: 100%; 
 
    background: orange; 
 
    float: left; 
 
    display:flex; 
 
    flex-direction:row; 
 
    align-items:stretch; 
 
} 
 

 
#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; 
 
    flex:1 0; 
 
} 
 

 
#green { 
 
    height: 300px; 
 
    width: 100%; 
 
    background: green; 
 
}

<div id="container"> 
 

 
    <div id="red"></div> 
 

 
    <div id="yellow"> 
 

 
    <div id="green"></div> 
 

 
    </div> 
 

 
</div>

Fiddle