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

我在这个网站上有两个

元素。 这是我正在开发的一个网站，是一项正在进行中的工作，但我想在今晚完成一些设计选择。 现在我的简化.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伸展以适应#leftdiv的内容。 您可以在我链接的页面中看到，有些内容溢出了#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

我假设你在两者都使用了高度属性，所以我将它与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具有相同的高度

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

谢谢，我希望这会帮助你……问候…… 🙂

Answer 2

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

演示

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

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

Answer 3

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

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

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

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

Answer 4

看起来你正在寻找的是CSS圣杯布局的变体，但是在两列中。 查看此答案的资源以获取更多信息。

Answer 5

您肯定会从为项目使用响应式框架中受益。 它可以为您节省大量的麻烦。 但是，看到HTML的结构我将执行以下操作：

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

HTML：

 
 
asdasdasd ads asd ads asd ad asdasd ad ad a ad
 
asd as dad ads ads ads ad ads das ad sad
  

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