Hey,
I'm having an issue getting the height and width of DIV elements that have resized themselves to fit their content.

Note: I do not have a problem getting the height and width of DIV elements that I have set using Javascript. The probel is that this value appears to stick. I.e. the height is set to 150px, then the content is changed and the DIV cosumes as much height as is required (clearly more than 150px), however analysing the DOM indicates that the height is the same (though it is clearly not).

I want to know how to get hold of the 'actual' size of a DIV element that is manipulated by the content of the DIV.

I am also interested in a solution that works in IE and Firefox (at least).

Cheers.

I was using style.width and style.height, but I have also tried offsetWidth and offsetHeight...

If you view these in the mozilla dom inspector, you see that they maintain the original height and width that you set. Not the height and width that has been forced by the content.

Does anyone know how to get the actual height and width of a DIV element after it has been modified by content? I could see any attribute in the DOM inspector that looked like it related to the content modified size.

offsetHeight and offsetWidth were going to be my recommendations. I'll play around with this. So you have an initial height/width set by CSS, then you add content, presumably with JavaScript, and now want the new size of the DIV, correct?

There seems to be a bug with offset properties in moz at the moment as its returning the style value and not the offset value. However I came up with a workaround so that it displays the offsetHeight in moz. Code is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Modified Height</title>
<style type="text/css">
#Layer1 {
position:absolute; 
width:50px; 
height:15px; 
z-index:1; 
left: 151px; 
top: 165px; 
visibility: visible;
}

#Layer2 {

position:absolute; 
width:150px; 
height:150px; 
z-index:2; 
left: 300px; 
top: 200px; 
visibility: visible;

}
</style>
<script type="text/javascript">
<!--
function modHT (id) {  
newdim = document.getElementById(id).innerHTML= 'hello there my name is eddie and I am making a new height';
}

function getDim (id) {  
document.getElementById(id).style.height="auto";
// match box models
if (document.all) {
gh = document.getElementById(id).offsetHeight+10;
}
else {
gh = document.getElementById(id).offsetHeight;
}
alert (gh)
}
 
//-->
</script>

</head>

<body onload="modHT ('Layer1'); getDim('Layer1')">

<div id="Layer1"></div>
<div id="Layer2">
<a href="#" onmousedown="getDim('Layer1')">Get Height</a>
</div>
</body>
</html>

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php

Comments
tgreer - nice. Thanks for the post.

Hey there peoples,
I have discovered that if you set the height and width to auto initially, then you don't have to worry about this.... of course I am not sure if I can set it to auto initially...

I have made a few mods and tested in IE and Mozilla. Also if you do need to set an initial height and with, then you will need to set the height and width to auto for it to update.

thanks for your help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Modified Height</title>
<style type="text/css">
	#Layer1 {
		position:absolute; 
		width: auto; 
		height: auto; 
		z-index:1; 
		border: 1px dotted #639ACE;
		left: 151px; 
		top: 165px; 
		visibility: visible;
	}
	
	#Layer2 {
		position:absolute; 
		width: auto; 
		height: auto; 
		z-index:2; 
		left: 300px; 
		top: 200px; 
		visibility: visible;
	}
</style>

<script type="text/javascript">
<!--
	function modHT (id) {  
		document.getElementById(id).innerHTML = 'hello there my name is eddie and I am making a new height';
	}
	
	function clearDiv (id) {  
		document.getElementById(id).innerHTML = "";
	}
	
	function getHeight (id) {  
		var gh = document.getElementById(id).offsetHeight;
		alert (gh);
	}

	function getWidth (id) {  
		var gh = document.getElementById(id).offsetWidth;
		alert (gh);
	}
//-->
</script>

</head>

<body onload="">

<div id="Layer1">
</div>

<div id="Layer2">
	<a href="javascript:modHT('Layer1')">Mod</a>
	<a href="javascript:clearDiv('Layer1')">Clear</a>
	<a href="javascript:getHeight('Layer1')">Get Height</a>
	<a href="javascript:getWidth('Layer1')">Get Width</a>
</div>
</body>
</html>

But what if the implicit CSS style value of the div is 'display:none'.. Do you thinkg there is any way to get the size of the div even the CSS style definition is 'display:none'.. ?

hello how are you?
i have same problem to getting div height.
if you have got solution plz tell me thanks
below it is problem.

Hey,
I'm having an issue getting the height and width of DIV elements that have resized themselves to fit their content.

Note: I do not have a problem getting the height and width of DIV elements that I have set using Javascript. The probel is that this value appears to stick. I.e. the height is set to 150px, then the content is changed and the DIV cosumes as much height as is required (clearly more than 150px), however analysing the DOM indicates that the height is the same (though it is clearly not).

I want to know how to get hold of the 'actual' size of a DIV element that is manipulated by the content of the DIV.

I am also interested in a solution that works in IE and Firefox (at least).

Cheers.

Was really helpful. Had a similar problem, resolved in minutes.
Thanks a lot.

This article has been dead for over six months. Start a new discussion instead.