Guillaume Guillaume - 7 months ago 7
HTML Question

How to get a height:100% div in a height:auto div?

Here is my HTML :

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


Here is my 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; }


Here is a sample : https://jsfiddle.net/cc5xL660/

As it is in the jsfiddle, the
#red
div
is invisible. I'm looking for a way to make the
#red
div
visible without a specific
height
dimension. Of course, I could give a
height:300px
to the
#red
div
but the
#green
div is supposed to be dynamic. I would like the
#red
div to have the same height.

GG. GG.
Answer

You have to give

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

Your JSFiddle edited: https://jsfiddle.net/cc5xL660/4/

Comments