Can you have two divs, with one of them always maintaining 100% height?

Question

I have 2 containers, that float left:

• box 1 (a red div) with a hidden overflow
• box 2 (a yellow div) with 100% height

I want the box 1 to always fill to 100%, even if box 2 gets larger

<style>
* {margin:0;}
html {position: relative; min-height: 100%;}
body {margin: 0 0 100px;}
#footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%; background:gray;
    }

#box1{width:200px; background:yellow; float:left; height:100%}
#box2{width:600px;background:red; float:left; overflow:hidden; height:2000px; }
</style>

<div id='box1'></div>
<div id='box2'></div>
<div id='footer'></div>

http://jsfiddle.net/isherwood/Gy7Jj/

Answer 1

You need set Height after print content (Jquery)

Or set main static div.

<style>
* {margin:0;}
html {position: relative; min-height: 100%;}
body {margin: 0 0 100px;}
#footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%; background:gray;
    }
#main { height:2000px; }
#box1{width:200px; background:yellow; float:left; height:100%;}
#box2{width:600px;background:red; float:left; overflow:hidden; height:100%; }
</style>
<div id="main">
  <div id='box1'></div>
  <div id='box2'></div>
</div>
<div id='footer'></div>

Answer 2

Setting the height to 100% won't effect the height. A floated element is going to wrap around its inner contents. You should use javascript to dynamically change the height. The below is one way to do it using jQuery's height():

Set the height once the document is ready

$(document).ready(function(){
    $("#box1").height($("#box2").height());
});

Bind the resize event:

$(window).resize(function(){
    $("#box1").height($("#box2").height());
});