css浮动元素增加父级高度，但同级（100％高度）不起作用

Question

I have a container with 2 children : one is floating and increasing his parent's height, the second is not floating and fill the rest of the width. I'd like to make the second filling the height also.

Here is a fiddle of my problem : http://jsfiddle.net/LAesa/

In this fiddle I'd like to make the red div filling 100% height of his parent.

Here the html :

<div id="container">
    <div id="float">
        The floating <br/>column
    </div>

    <div id="fill">
        This one fill the rest
    </div>

    <div class="clearfloat"></div>
</div>

Here the css :

#container {
    width: 500px;
    background-color: yellow; 
}

#float {
    width: 20%; 
    float: left; 
    background-color: green; 
}

#fill {
    min-height: 100%; 
    overflow: hidden; 
    background-color: red; 
}

.clearfloat {
    clear: both; 
}

Thank you very much !

Answer 1

Provided that you don't need to support older browsers you can also use the flexbox layout. http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://caniuse.com/flexbox

<div class="flex-container">
    <div id="left">
        The floating <br/>column
    </div>

    <div id="right">
        This one fill the rest
    </div>
</div>

And CSS:

.flex-container {
  display: flex;
  flex-flow: row no-wrap;
  justify-content: space-around;
  background: yellow;
  width: 500px;
}

#left {
    width:20%;
    background-color: green; 
}

#right {
    width:80%;
    background-color: red; 
}

http://jsfiddle.net/gwwar/KFmVJ/1/

Answer 2

Jquery solution, here's a Fiddle

$(function() {
  var fHgt = $('#float').outerHeight();

  $('#fill').css({ height: fHgt });
});

and here's a CSS solution

#container {
  display: table;
  width: 500px;
  background-color: yellow;
}
#float {
  display: table-cell;
  width: 20%;
  background-color: green; 
}
#fill {
  display: table-cell;
  width: 80%;
  overflow: hidden; 
  background-color: red; 
}