Set height of
= to height of another
through .css

Question

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?

Absolutely, although I'd prefer not to use jQuery if possible. — gator, Oct 21 '13 at 00:33

Michał Rybak · Answer 1 · 2013-10-21T01:01:26.047

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.

edited Oct 21 '13 at 01:01

answered Oct 21 '13 at 00:55

Michał Rybak

8,648
3
42
54

7

Best solution, Javascript is absolute overkill in this case. – user3453428 Jul 24 '17 at 11:20

score 18 · Accepted Answer · edited Feb 04 '21 at 02:25

18

I am assuming that you have used height attribute at both so i am comparing it with a height left do it with 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;
}

Another idea can be found here HTML/CSS: Making two floating divs the same height.

edited Feb 04 '21 at 02:25

user202729

3,358
3
25
36

answered Oct 21 '13 at 04:48

Just code

13,553
10
51
93

hope I'm not saying anything silly, but this doesn't work if you have padding or borders on only one of the left/right divs. They will add to the outside height of the div. – JRobinss Oct 02 '17 at 11:46
@JRobinss any example to prove what you are saying? – Just code Oct 02 '17 at 11:49
No, but after reading your question I poked around... consider [this SO question](https://stackoverflow.com/questions/10787782/full-height-of-a-html-element-div-including-border-padding-and-margin) which says that what I would be looking for would be [offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight), not [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height). See also [this](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements). Hope this helps. – JRobinss Oct 02 '17 at 14:41
1

(BTW, after reading some stuff online I ended up using `display:table` as in the other answer, but I did try your code! ;-) ) – JRobinss Oct 02 '17 at 14:42

levininja · Answer 3 · 2013-10-21T01:09:39.477

4

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

edited Oct 21 '13 at 01:09

answered Oct 21 '13 at 00:40

levininja

3,118
5
26
41

2

it's possible to achieve this using pure CSS, see my answer. – Michał Rybak Oct 21 '13 at 01:00
1

Ah, totally forgot about good ole `display:table`. Thanks for that; will edit my answer accordingly. – levininja Oct 21 '13 at 01:06

Eduardo La Hoz Miranda · Answer 4 · 2013-10-21T04:38:05.817

You would certainly benefit from using a responsive framework for your project. It would save you a good amount of headaches. However, seeing the structure of your HTML I would do the following:

Please check the example: 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;}

score 1 · Answer 5 · edited May 23 '17 at 12:25

1

It seems like what you're looking for is a variant on the CSS Holy Grail Layout, but in two columns. Check out the resources at this answer for more information.

edited May 23 '17 at 12:25

Community

1
1

answered Oct 21 '13 at 00:47

Christian Ternus

8,406
24
39

Set height of
= to height of another
through .css

5 Answers5

Linked

Set height of = to height of another through .css

5 Answers5

Linked

Set height of
= to height of another
through .css