I'm trying to set the height of one element to the height of another by using javscript, and I've tried using the jquery height() method but it doesn't work because one of the element's has height set to auto:

#content
{
    background-color:#F2F2F2;
    width:1000px;
    margin:0px auto;
    text-align:left;
    min-height:900px;
    height:auto;
    border-top:5px solid #032F76;
    border-bottom:5px solid #032F76;
    overflow:auto;
}

So is there any easy way to get the height of an element who's height is set to auto?

I'm trying to set the height of one element to the height of another by using javscript, and I've tried using the jquery height() method but it doesn't work because one of the element's has height set to auto:

#content
{
    background-color:#F2F2F2;
    width:1000px;
    margin:0px auto;
    text-align:left;
    min-height:900px;
    height:auto;
    border-top:5px solid #032F76;
    border-bottom:5px solid #032F76;
    overflow:auto;
}

So is there any easy way to get the height of an element who's height is set to auto?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 25, 2012 at 22:30 Gavin SellersGavin Sellers 66411 gold badge1515 silver badges2727 bronze badges 1

• Are you talking about height of block itself or height of its contents? – Marat Tanalin Commented Feb 25, 2012 at 22:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

jQuery's .height() method still returns the numerical height value even if it's set to auto. BUT make sure you take margin, padding and borders into consideration.

I ran a test with your CSS just to make sure and .height() works fine.
http://jsfiddle/ysMge/8/

jQuery has 3 height calculating functions that take the margin, padding and border values into account differently.

Please review:

$("#content").height()
$("#content").outerHeight()
$("#content").innerHeight()

http://api.jquery./height/
http://api.jquery./outerHeight/
http://api.jquery./innerHeight/

You can use getComputedStyle:

var elem = document.getElementById('content');
var height = window.getComputedStyle(elem,null).getPropertyValue('height');

Which should return the puted height, in pixels, of the element.

A somewhat contrived JS Fiddle example.

Just use this code

$('#content').height();

heres a sample of my code:

$(document).ready(function() {
  CenterFrameSizer();
});

function CenterFrameSizer(){
  // Sets the left box and the center box the same height.
  if ( $("#leftbox").height() > $("#contentbox").height() ) {
    $("#contentbox").height($("#leftbox").height());
  } else {
    $("#leftbox").height($("#contentbox").height());
  }
}

function GalleryResize(){
  if ( $("#leftbox").height() > $("#gallery").height() ) {
    $("#gallery").height($("#leftbox").height());
  } else {
    $("#leftbox").height($("#gallery").height());
  }
}