30

I have two <div> elements. Right now my simplified .css is thus:

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

I've set a hard min- and max-heights for both so they keep the same height, and if content overflows out of the #rightdiv, a scrollbar appears. I'd like this scrollbar to be gone and having the #rightdiv and #leftdiv stretch to fit the contents of the #rightdiv. I want the whole site to stretch height-wise to fit the contents, but if I remove the overflow-y: auto; from my .css and remove the max-heights, the #rightdiv stretches, but the #leftdiv doesn't, yielding some truly ugly design.

I'd like something like the below:

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

How would I go about setting the min-height of both like this?

4

5 回答 5

23

If you don't care for IE6 and IE7 users, simply use display: table-cell for your divs:

demo

Note the use of wrapper with display: table.

For IE6/IE7 users - if you have them - you'll probably need to fallback to Javascript.

于 2013-10-21T00:55:09.190 回答
18

我假设你在这两个地方都使用了 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。

于 2013-10-21T04:48:59.370 回答
3

If you're open to using javascript then you can get the property on an element like this: document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

And you can set the attribute on an element like this: .setAttribute('style','max-height:'+heightVariable+';');

Note: if you're simply looking to set both element's max-height property in one line, you can do so like this:

#leftdiv,#rightdiv
{
    min-height: 600px;   
}
于 2013-10-21T00:40:20.897 回答
1

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

于 2013-10-21T00:47:35.943 回答
1

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