Set height of div to height of another div through css

Question

I have two  lt div gt  elements on this site  It s a site I m developing  and is a work in progress  but some of the design choices I d like to finalize tonight  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  You can see in the page I linked that there s some content that overflows the boundaries of the  rightdiv  and the scrollbar  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

User · Answer

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

User · Answer

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 gt 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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to css