如何獲得高度：100％div的高度：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的#reddiv是看不見的。我正在尋找一種方法來使#reddiv可見，而沒有一個特定的height維度。當然，我可以給一個height:300px到#reddiv但是#green div應該是動態的。我希望#red div具有相同的高度。

Answer 1

你必須給

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

你的jsfiddle編輯：https://jsfiddle.net/cc5xL660/4/

Answer 2

您可以使用display:flex做到這一點。看看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