Set height of <div> = to height of another <div> 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
– gator, Commented Oct 21, 2013 at 0:33

Michał Rybak · Accepted Answer · 2013-10-21 01:01:26Z

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.

Best solution, Javascript is absolute overkill in this case.

user202729 · Accepted Answer · 2021-02-04 02:25:31Z

19

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 4, 2021 at 2:25

user202729

4,2393 gold badges31 silver badges48 bronze badges

answered Oct 21, 2013 at 4:48

Just code

13.8k10 gold badges54 silver badges94 bronze badges

4 Comments

JRobinss Over a year ago

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.

Just code Over a year ago

@JRobinss any example to prove what you are saying?

JRobinss Over a year ago

No, but after reading your question I poked around... consider this SO question which says that what I would be looking for would be offsetHeight, not height. See also this. Hope this helps.

JRobinss Over a year ago

(BTW, after reading some stuff online I ended up using display:table as in the other answer, but I did try your code! ;-) )

levininja · Accepted Answer · 2013-10-21 01:09:39Z

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

it's possible to achieve this using pure CSS, see my answer.
Ah, totally forgot about good ole display:table. Thanks for that; will edit my answer accordingly.

Community · Accepted Answer · 2017-05-23 12:25:45Z

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.

Eduardo La Hoz Miranda · Accepted Answer · 2013-10-21 04:38:05Z

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

Collectives™ on Stack Overflow

Set height of <div> = to height of another <div> through .css

5 Answers 5

1 Comment

4 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

2 Comments

Comments

Comments

Linked

Related