通过 .css 将 <div> 的高度 = 设置为另一个 <div> 的高度答案

【问题标题】：Set height of <div> = to height of another <div> through .css通过 .css 将 <div> 的高度 = 设置为另一个 <div> 的高度
【发布时间】：2013-10-29 08:33:02
【问题描述】：

我有两个 <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 的内容。我希望整个站点在高度方面拉伸以适应内容，但是如果我从我的 .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;
}

我将如何设置两者的最小高度？

【问题讨论】：

你可以使用 Javascript 吗？
当然可以，不过如果可能的话我不想使用 jQuery。

标签： javascript jquery css

【解决方案1】：

如果您不关心 IE6 和 IE7 用户，只需将 display: table-cell 用于您的 div：

demo

注意display: table 使用包装器。

对于 IE6/IE7 用户——如果你有他们——你可能需要回退到 Javascript。

【讨论】：

最佳解决方案，在这种情况下，Javascript 绝对是矫枉过正。

【解决方案2】：

我假设您在两者都使用了高度属性，所以我将它与高度进行比较剩下用 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.

【讨论】：

希望我没有说什么傻话，但是如果您只有一个左/右 div 有填充或边框，这将不起作用。它们将添加到 div 的外部高度。
@JRobinss 有什么例子可以证明你在说什么吗？
不，但是在阅读了您的问题后，我四处寻找...考虑this SO question，它说我要寻找的是offsetHeight，而不是height。另见this。希望这会有所帮助。
（顺便说一句，在网上阅读了一些东西后，我最终在另一个答案中使用了display:table，但我确实尝试了你的代码！;-)）

【解决方案3】：

如果您愿意使用 javascript，那么您可以像这样获取元素上的属性：document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

您可以像这样在元素上设置属性：.setAttribute('style','max-height:'+heightVariable+';');

注意：如果您只是想在一行中设置两个元素的 max-height 属性，您可以这样做：

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

【讨论】：

使用纯 CSS 可以实现这一点，请参阅我的回答。
啊，完全忘记了好 oledisplay:table。感谢那;将相应地编辑我的答案。

【解决方案4】：

您正在寻找的似乎是CSS Holy Grail Layout 的一个变体，但在两列中。查看this answer 的资源以获取更多信息。

【讨论】：

【解决方案5】：

您肯定会从为您的项目使用响应式框架中受益。它会为您节省大量的头痛。但是，看到您的 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;}

【讨论】：