将<div> =的高度设置为另一个<div>到.css的高度

Question

我<div>在这个网站上有两个元素.这是我正在开发的一个网站,是一项正在进行的工作,但我想在今晚完成一些设计选择.现在我的简化.css是这样的:

#leftdiv {
    /*this is the navigation pane*/
    min-height: 600px;
    max-height: 600px;
}
#rightdiv {
    /*this is the primary pane*/
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

我为两者设置了一个很难的最小和最大高度,因此它们保持相同的高度,如果内容溢出#rightdiv,则会出现一个滚动条.我希望这个滚动条消失,#rightdiv并且#leftdiv拉伸以适应内容#rightdiv.您可以在我链接的页面中看到,有些内容溢出#rightdiv了滚动条的边界.我希望整个网站在高度方向上伸展以适应内容,但如果我overflow-y: auto;从我的.css中移除并移除最大高度,#rightdiv延伸,但#leftdiv不会,产生一些真正丑陋的设计.

我想要像下面这样的东西:

#leftdiv {
    min-height: equal to #rightdiv height if #rightdiv is taller, else 600px;
}
#rightdiv {
    min-height: equal to #leftdiv height if #leftdiv is taller, else 600px;
}

我怎样才能像这样设定两者的最小高度？

Answer 1

如果您不关心IE6和IE7用户,只需使用display: table-cell您的div:

演示

注意使用包装器display: table.

对于IE6/IE7用户 - 如果你有 - 你可能需要回退到Javascript.

Answer 2

我假设你在两者都使用了高度属性,所以我将它与javasript的高度进行比较

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

另一个想法可以在这里找到 HTML/CSS:使两个浮动div具有相同的高度

请注意,此代码未经过测试

谢谢,我希望这会帮助你......问候...... :)