How to Get the Height of a Hidden Div

Album Cover: Diamond Hoo Ha

"I got to get you in my suitcase."
Supergrass / Diamond Hoo Ha Man

Posted on April 29, 2009 1:51 PM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

While working on a web design recently, I realized that I needed to be able to dynamically retrieve the height of a div. My initial design involved some JavaScript, and actually stored the div in its entirety as a JavaScript variable. When I hovered over a certain page element, I would dynamically replace the contents of another page element with that div using the innerHTML property.

What I very quickly discovered is that there was no way for me to dynamically retrieve the height (or width) of the div because it didn't actually exist as a page element when the page was initially rendered. My first attempt at a solution to the problem was to no longer store the div in a JavaScript variable and instead make it a hidden element in the actual rendered page. To do so, I relied on relative positioning and the style display: none to keep the div out of view.

What I found was that, for whatever reason, once I had converted the div to an actual page element, I was still unable to retrieve its height dynamically, once the page had been fully rendered. When I attempted to report the element's height using JavaScript's alert() function, the height was always returned as 0. In a sense, it made sense because the element really didn't have a height yet, at least as far as its visual display on the page was concerned. Being the web designer, though, I knew the div was there, and just hidden, so I still expected there to be a height associated with it.

Some Google searching eventually led me to a post at WebDeveloper.com that said the following:

You can measure an element whose style visibility is hidden, if the display is not set to none.
You can make it act like display=none by giving it an absolute position while it is hidden, and remove the position property when you make it visible.

A little tinkering with my design and JavaScript proved the post insightful. Instead of relying on relative positioning initially, I changed the div to be absolutely positioned on the page. I converted the display styling to the block style and set visibility to "hidden." By doing so, the div was actually rendered with a real height (and width) and I could access it via JavaScript calls as I had originally hoped. As covered in the aforementioned forum post, the other trick was that I needed to remove the absolute positioning on the div when it came time to actually display it on the page, so that just came down to setting the position property to "relative" at the same time I set the visibility property to "visible."

In doing so, I had essentially the same page behavior from the end user's perspective, but was able to dynamically access the height of the div without any trouble. Hopefully next time around, I'll remember this trick so I don't end up having to refactor my HTML and JavaScript to support it.

Comments

Newbie on May 17, 2009 at 12:26 PM:

Excellent blog post. I was having the exact same problem and was looking for a solution to it. I almost starting tearing my hair out of frustration. Thanks for sharing your experience, saved me a hell of alot of time.
Cheerio..

Permalink

Salman on June 15, 2009 at 5:58 AM:

You're right indeed. Elements having "display: none" do not do not occupy any space until they're "display: block"ed. However, elements with "visibility: hidden" DO occupy space. You can try a combination of visibility, z-index and relative positioning to move the element out of the document flow while still having that element to maintain a layout.

Permalink

Chris on June 16, 2009 at 3:19 PM:

You are my new god :)

I love you.

Permalink

James on August 21, 2009 at 3:19 AM:

Fantastic post - just what I was looking for.

Although I ended up hiding my divs by setting "height:0" and "overflow:hidden" and then displaying them by setting "height:auto". That works quite nicely

Permalink

Jonathan Paul on October 15, 2009 at 6:12 AM:

Hey,
I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

Thank you
:-)
Keep blogging

Permalink

Nicole on February 04, 2010 at 12:58 PM:

Excellent article! Totally helped me out! Thank you!

Permalink

cao thuy on August 20, 2010 at 12:45 AM:

great post. thank you.

Permalink

Todd on August 28, 2010 at 12:50 AM:

Thanks a lot!!! I saw that post earlier but didn't really pay attention to it. Glad you made an article about it.

Permalink

Rafael on September 28, 2011 at 5:26 AM:

Perfect post! Help me a lot!

tks

Permalink

Niche Relevant backlinks services on September 05, 2016 at 2:49 AM:

Only a grinning visitant here to share the adoration (:, btw remarkable style.

Permalink

how to get minecraft on September 28, 2016 at 4:00 AM:

Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work.

Permalink

how to download movies from netflix on September 28, 2016 at 4:00 AM:

I found your this post while searching for information about blog-related research ... It's a good post .. keep posting and updating information.

Permalink

PS4 Remote Play Apk on October 05, 2016 at 6:30 AM:

the web will be a lot more useful than ever before.

Permalink

fitness on October 28, 2016 at 9:31 AM:

I need this article to complete my assignment in the college,

Permalink

Angela on November 05, 2016 at 12:32 PM:

I have been searching the Internet for fun and came upon your website. Fabulous post.

Permalink

Dubai on December 06, 2016 at 8:41 AM:

What a fantabulous post this has been. Never seen this kind of useful post.

Permalink

Dentist Dubai on December 11, 2016 at 3:25 AM:

Thanks for providing recent updates regarding the concern,

Permalink

versace shoes on January 04, 2017 at 7:43 AM:

A good article will give correct information about a topic. Therefore, you should choose a quality article for your own advancement in the future.

Permalink

google on January 22, 2017 at 8:01 PM:

ada ada aja

Permalink

yayyhpbv on May 15, 2017 at 5:23 AM:
Niky Eddie on March 17, 2018 at 2:26 PM:

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.