Question

191

how to calculate the height of a div with some text inside and a fixed width

rated 0 times [ 196] [ 5] / answers: 1 / hits: 45946 / 11 Years ago, fri, june 7, 2013, 12:00:00

I have the following code:

<div class=content>

                        <a href=/profile/Nat's Rare &amp; Raw class=link-name><strong>Irene Natalia</strong></a>

                        Hooray! we'll proceed with the shipping and inform the tracking # tomorrow :) Thank you, Angel! :)



                        <br>

                        <span class=date>7 days ago</span>

                    </div>

I wanted to know the height of this div from using javascript. Is there a way to do so?
This div has a fixed sized width (in this case 150px). I just wanted to know the height of the div say the text changed. Preferred method is via jQuery but javascript is fine as well

EDIT:

A very important note here is that this is a calculation before the div is being rendered. I am basically creating a pinterest layout and I need to calculate the height of the comments in the item card so that masonry can lay it out first before the image is loaded.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kileyr

Add To Favorites

Follow

Total Points: 112

Total Questions: 105

Total Answers: 114

Location: United States Minor Outlying Island

Member since Sat, May 28, 2022

2 Years ago

answered 11 Years ago tobyl · Accepted Answer

Javascript:

element.offsetHeight;

This gives the height of an element

See about offsetHeight here and this is pure javascript.

jQuery:

$elem.height(); - gives height of the element without padding , border and margin

$elem.innerHeight(); - gives height including padding

$elem.outerHeight(true); - gives height including padding, border and margin

EDIT:

If you want to find the height of the element before it is rendered , then i can give you one of many possible solutions

Append the element to the body with respective innerHTML's

Find the height using any of the above methods

Now,remove the element and of course , you found the height & element is not there

See Fiddle :To get an element's rendered height