Detecting The Height of a Div

@chestertbMar 09.2011

Hello,

I have a dynamic web page with three vertical divs.

In the style attribute, I do not specify the div height because I don’t know that until they’re draw by the browser.

However, I’d like to add a fouth horizontal div acfross the bottom of the page at the bottom of the tallest of the vertical divs.

Is there any way to get the height of a div after it’s drawn?

Thanks
CTB

to post a comment

JavaScript

7 Comments(s) _↴

@TcobbMar 10.2011 — #Go look at http://www.javascriptkit.com/domref/elementproperties.shtml and look at the descriptions of the properties offsetHeight and clientHeight. That should give you the information you need.

@chestertbauthorMar 11.2011 — #Brilliant. Thank you.

@chestertbauthorMar 12.2011 — #offsetHeight and clientHeight work... sort of.

It seems that is I have nested DIVs they won't work on the outer div.

Example 1

[code=html]<div id='outer'>
 This is some text
 <div>[/code]

or Example 2

[code=html]<div id='outer'>
 <div id='inner1'>
 This is some text
 <div>
 <div id='inner2'>
 This is some text
 <div>
 </div>[/code]

The function

height = document.getElementById('outer').clientHeight

will return a value in Example 1, but will return 0 in Example two.

Calculating the height from the size of the individual inner divs is not an option as the page is generated dynamically.

Note that I need to calculate height so I can dynamically position a footer on the page. I tried simply having one div wrapping the 'outer' followed by a div that warps the footer but that didn't work.

Any thoughts?

CTB

@TcobbMar 12.2011 — #You might want to try something like this. I don't guarantee it will work, but basically you send it the HTML id of an element as the argument and it returns an object which contains the size and coordinates of the element in terms of absolute pixels.

[CODE]function getSpecs(id){
 var x = document.getElementById(id);
 var ret, width, height,top = 0, left = 0;
 width = x.offsetWidth;
 height = x.offsetHeight;
 while( x != document.body){
 top += x.offsetTop;
 left += x.offsetLeft;
 x = x.offsetParent;
 }
 ret= {};
 ret.height = height;
 ret.width = width;
 ret.top = top;
 ret.left = left;
 
  return ret;
 
 }[/CODE]

If you have a DIV that has an id of "fred" you would then do something like:

var x = getSpecs('fred');

In terms of absolute positioning x.left and x.top will be equal to where the element is if it was stuck there by absolute positioning, and x.width and x.height will supplement this information to give you in pixels an exact map of where the element is. It will not matter if its nested in another element or not.

Or at least, I hope it works like that. :-)

@chestertbauthorMar 13.2011 — #Thanks TCobb.

Unfortunately, that's not going to work because the divs inside the outer div are generated dynamically so the script isn't going to know in advance what they're called.

You see, the same shell can load different content, perhaps an article or blog post, maybe a product for sale, or even an admin script that changes the configuration of the content.

It's just not practical to test for each variety.

@TcobbMar 13.2011 — #In any event you're going to have to make the determination after the dynamic content had loaded, but you might try something like this where the argument is the HTML id of the non-dynamic container. It examines all the divs that are within the container and returns an object which has two properties: height--the number of pixels in height of the tallest div within that container, and ref--which is the reference to that div.

[CODE]function tallestDiv(cont_id){
 var x, y, i, ref, ret, val, tallest = 0;
 var x = document.getElementById(cont_id);
 y = x.getElementsByTagName('div');
 for(i = 0; i < y.length; i++){
 val = y[i].offsetHeight;
 if (val > tallest){
 tallest = val;
 ref = y[i];
 }
 }
 ret ={};
 ret.ref = ref;
 ret.height = tallest;
 return ret;
 } [/CODE]

@rnd_meMar 13.2011 — #
Note that I need to calculate height so I can dynamically position a footer on the page. I tried simply having one div wrapping the 'outer' followed by a div that warps the footer but that didn't work.

Any thoughts?

CTB[/QUOTE]

why don't you simply use blocks so that the footer flows to the bottom naturally?

if you must use positioning, put the footer at "bottom:0", and you won't need to know the height of the container...

if you must:

[CODE]<!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>box test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
 
 <div id='outer'>
 <div id='inner1'>
 This is some text
 <div>
 <div id='inner2'>
 This is some text
 <div>
 </div>
 
 <script type='text/javascript'>
 
 function el(tid) {return document.getElementById(tid);}
 
 window.onload= function (){
 var h1= el("outer").offsetHeight;
 var i1=el("inner1");
 i1.innerHTML=Array(500).join(i1.innerHTML);
 var h2= el("outer").offsetHeight;
 alert("Was: "+h1+"px tall,   now: "+h2+"px tall");
 }
 
 </script>
 </body>
 </html>[/CODE]

you don't need loops or to know the objective position, just a few box dimensions, those are native dom properties for all browsers.

see http://www.quirksmode.org/dom/w3c_cssom.html#elementview for info

Also in #JavaScript _↴

how obtain the current time in millis?javascript/asp.net dropdownlist Help to change a button to a hyperlink

Success!

Help @chestertb spread the word by sharing this article on Twitter...

Tweet This

Detecting The Height of a Div

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Detecting The Height of a Div

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴