通过.css设置一个<div>的高度等于另一个<div>的高度

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和#leftdiv的最小高度和最大高度，以使它们保持相同的高度。如果内容超出#rightdiv的范围，会出现滚动条。我希望滚动条不再出现，并且#rightdiv和#leftdiv能够根据#rightdiv的内容自适应拉伸。我希望整个网站能够根据内容自适应拉伸高度，但是如果我从我的.css文件中删除overflow-y: auto;并删除最大高度，#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;
}

我该怎样设置两者的最小高度，类似于这样？

- gator

---

你是否可以使用JavaScript？ - Christian Ternus

当然，如果可能的话，我宁愿不使用jQuery。 - gator

Answer 1

如果您不关心IE6和IE7用户，只需对您的

使用display:table-cell:

演示

请注意使用具有display:table的包装器。

对于IE6 / IE7用户-如果您有它们-您可能需要回退到Javascript。

- Michał Rybak

---

最佳解决方案，JavaScript 在这种情况下完全是过度设计。 - user3453428

Answer 2

我假设您已经在两个标签中使用了height属性，因此我将其与一个高度进行比较，用JavaScript实现。

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: Making two floating divs the same height。

- Just code

---

希望我没有说错什么，但如果您在左/右div中只有一个添加了填充或边框，则此方法不起作用。它们将增加div的外部高度。 - JRobinss

@JRobinss 有没有任何例子可以证明你所说的？ - Just code

不是的，但是在阅读了您的问题后，我四处查找了一下...可以考虑这个SO问题，其中提到我要寻找的是offsetHeight，而不是height。另请参见此文档。希望这能有所帮助。 - JRobinss

顺便说一句，在阅读了一些在线资料后，我最终使用了display:table，就像其他答案中所述，但我确实尝试了你的代码！;-) - JRobinss

Answer 3

如果您愿意使用JavaScript，您可以按照以下方式获取元素的属性：document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

并且您可以按照以下方式设置元素的属性：.setAttribute('style','max-height:'+heightVariable+';'); 注意：如果您只想在一行中设置两个元素的max-height属性，可以像这样做：

#leftdiv,#rightdiv
{
    min-height: 600px;   
}

- levininja

---

可以使用纯CSS实现这一点，详见我的答案。 - Michał Rybak

啊，完全忘记了好老的 display:table。谢谢你提醒我，我会相应地编辑我的答案。 - levininja

Answer 4

您的项目肯定会受益于使用响应式框架。这将为您节省很多麻烦。不过，根据您的HTML结构，我建议进行以下操作：

请查看示例： http://jsfiddle.net/xLA4q/ HTML:

<div class="nav-content-wrapper">
 <div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div>
 <div class="content">asd as dad ads ads ads ad ads das ad sad</div>
</div>

CSS:

.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;}
.left-nav{float:left;width:30%;height:inherit;}
.content{float:left;width:70%;height:inherit;}

- Eduardo La Hoz Miranda

Answer 5

看起来您需要的是CSS圣杯布局的变体，但是有两列。查看此答案中的资源以获取更多信息。

- Christian Ternus