Getting the height and width of content fitting DIV element.

Question

alpha_foobar 5 Junior Poster

19 Years Ago

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.

javascript

8 Contributors
14 Replies
1K Views
4 Years Discussion Span
Latest Post 14 Years Ago Latest Post by lasi7

tgreer 189 Made Her Cry

19 Years Ago

What properties are you using?

tgreer 189 Made Her Cry

19 Years Ago

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?

Eddie Traversa 1 Newbie Poster

19 Years Ago

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

tgreer commented: tgreer - nice. Thanks for the post. +1

tgreer 189 Made Her Cry

19 Years Ago

The work-around is to set the style.property to "auto"?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

alpha_foobar 5 Junior Poster · Answer 1 · 2005-07-19T03:25:24+00:00

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.

Eddie Traversa 1 Newbie Poster · Answer 2 · 2005-07-19T19:22:50+00:00

Yeah setting it via js dynamically seems to let moz read the value. Im going to file this as a regression bug though as that shouldnt be needed for offsetHeight etc...

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog

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

alpha_foobar 5 Junior Poster · Answer 3 · 2005-07-21T13:08:18+00:00

I need something that works in IE as well... target environment is IE (unfortunately).

Eddie Traversa 1 Newbie Poster · Answer 4 · 2005-07-21T13:10:52+00:00

that works in IE as well

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php
Reply With Quote

alpha_foobar 5 Junior Poster · Answer 5 · 2005-07-22T04:19:47+00:00

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>

possitive 0 Newbie Poster · Answer 6 · 2007-08-24T08:26:52+00:00

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'.. ?

raoisrar 0 Newbie Poster · Answer 7 · 2007-11-01T12:50:51+00:00

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.

MidiMagic 579 Nearly a Senior Poster · Answer 8 · 2007-11-02T11:50:19+00:00

You can. Just set them to auto in the stylesheet. They are valid styles.

rahuls2930 0 Newbie Poster · Answer 9 · 2009-06-15T13:24:32+00:00

Have you tried clientHeight and clientWidth

lasi7 0 Newbie Poster · Answer 10 · 2010-02-06T23:16:41+00:00

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