CSS div height problem

Here is my html code

<div id="container">
  <div id="nav">
  </div>

  <div id="main">
  </div>
</div

main's height varies depending of it's content. How to g开发者_C百科et the height of nav to be the same as main's height?

no 'direct' way, btw, by javascript DOM manipulation you could get the main offsetHeight by JS

var main = document.getElementById('main');
var mainH = main.offsetHeight;

and set it to the nav element

var nav = document.getElementById('nav');
nav.style.height = mainH+"px";

theres no direct way to do this, except css3 display:table or various background hacks google for "css 2 column layout"

edit You can also use following styles

#container {
    position:relative;
    overflow:hidden;
}
#nav{
    position:absolute;
    top:0;
    bottom:0;
//  left right depending on your design
}

See faux columns on A List Apart