Question

this site上有两个<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和滚动条的边界。我希望整个网站在高度上伸展以适应内容，但是如果我从.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;
}

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

Answer 1

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

demo

请注意使用包含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: Making two floating divs the same height

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

谢谢，我希望这会对你有所帮助...... ...... ...）

Answer 3

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

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

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

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

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;}

Answer 5

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

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

5 个答案: