473,322 Members | 1,734 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Finding height of auto-sized element?

Is there a way to find the size of a <div> element where the height either
hasn't been specified or is set to 'auto'?

document.getElementById('myId').style.height returns either nothing or
'auto'.
Jul 23 '05 #1
3 6123
On Wed, 8 Sep 2004 14:53:28 +0100, Danny@Kendal
<da***@STOPSPAMghpkendal.co.uk> wrote:
Is there a way to find the size of a <div> element where the height
either hasn't been specified or is set to 'auto'?

document.getElementById('myId').style.height returns either nothing or
'auto'.


And it shouldn't do anything but that. The style object represents inline
styles: those set by the style attribute or modification of the style
object itself. What you need is the calculated (computed) style.

In DOM-compliant browsers, you can use the getComputedStyle method to
return a computed style object. In IE (and other browsers that decided to
implement it), you can use offsetHeight:

<div id="myDiv">
Some content
</div>
<!-- Add BR elements to easily see changes -->

var getRefById = function() {return null;};
if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all[i] || null;};
}

function test() {
var d = getRefById('myDiv'), h = '0px', o;

if(d) {
if((o = document.defaultView) && o.getComputedStyle) {
h = o.getComputedStyle(d, null).height;
} else if('number' == typeof d.offsetHeight) {
h = d.offsetHeight + 'px';
}
}
// 'h' should now contain the height of 'myDiv', or 0px
}

Note that the value, h, is a string, not a number. This is because CSS
lengths can be specified in various units. However, all my tests returned
values in pixels.

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2
Danny@Kendal wrote:
Is there a way to find the size of a <div> element where the height either
hasn't been specified or is set to 'auto'?

document.getElementById('myId').style.height returns either nothing or
'auto'.

Try...

function getOffsetHeight(id)
{
h = Number.NaN;
if (document.getElementById) {
var ele = document.getElementById(id);
if (ele && typeof ele.offsetHeight != 'undefined') {
h = ele.offsetHeight;
}
}
return h;
}

-
Mike Foster
http://Cross-Browser.com
-
Jul 23 '05 #3
guest
25
>In DOM-compliant browsers, you can use the getComputedStyle method to
>return a computed style object. In IE (and other browsers that decided to
>implement it), you can use offsetHeight:

I was just browsing the forum for the solution of the same problem... this is just what i wanted

Thanks a lot, Michael !

Swapnil Pathare

--
May 20 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: patrick h. | last post by:
Greetings, I am encountering some issues regarding using float while desiring to set the height to 100%. This is likely due to my own misunderstanding of the way things actually function -- any...
3
by: inkswamp | last post by:
I've been using CSS for quite a while now but I have yet to master its eccentricities. Here's something I recently ran across and if someone could explain why this happens, I would appreciate it. ...
4
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...
2
by: Piotr K | last post by:
Hi, I've encountered a strange problem with Firefox which I don't have any idea how to resolve. To the point: I've <divelement with a style "height: auto" and I want to retrieve this value...
0
by: ll | last post by:
Hi, I am working on an image gallery which will have a 'large images' page, and those images need to all be the same side. On that large images page, there will also be a logo graphic, which...
4
by: ge5talt | last post by:
Longtime reader, 1st time poster :) I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on...
0
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...
1
by: neridaj | last post by:
Hello, I've found a few postings of this problem but none of the answers seem to fix my problem. I have a content div wrapped around a left floated image and a right floated table. I want the...
6
by: Christopera | last post by:
I built a this sites http://www.ourzeal.com/walko/index.html . If you look closely at the far right column it is about 1 px higher than the other two. The source does validate. I can not however...
1
by: pravinnweb | last post by:
can anyone tell me how to set auto height to outer div that is in green box id "gray-background" it should increase relatively to inner div "smbox" here is the css and html code it should work in...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.