CSS div高度问题

Question

这是我的HTML代码

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

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

主要的高度因内容而异。如何使导航的高度与主要高度相同？

Answer 1

除了css3 display：table或各种背景黑客外，没有直接的方法可以做到这一点 谷歌“css 2列布局”

修改 您还可以使用以下样式

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

Answer 2

没有“直接”方式，顺便说一下，通过javascript DOM操作你可以通过JS得到主要的offsetHeight

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

并将其设置为nav元素

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

Answer 3

请参阅A List Apart上的faux columns