CODEWITHSUNDEEP
javascriptcsshtmlheight
Freesnöw
Freesnöw

Reputation: 32133

Getting the height of a div

<span style="width:100%" id="learning_menu"><div id="aLM" style="width:100%;height:100%">test | test | test</div></span>

The code above is the current HTML that I have. I'll be making the inner "div" shrink-and-grow using jQuery. I can't figure out how to get the height of the span/div though. I'm not going to set a specific value in CSS because it could change depending on the browser. Because of this, my JavaScript (style.height) always returns 0.

Any ideas?

Upvotes: 5

Views: 10748

Answers (4)

oddy
oddy

Reputation: 1900

Hm. I am not sure wither I’ve got your issue right or not but… From pure javascript you can use clientHeight (or offsetHeight) property of the element to get it’s height in pixels. From jquery just use .height() method (wich is actually a browser-agnostic wrapper around clientHeight property).

Upvotes: 1

Naftali
Naftali

Reputation: 146302

Here it is in plain js and no jQuery required:

document.getElementById("learning_menu").offsetHeight;

Upvotes: 23

Matt Ball
Matt Ball

Reputation: 359776

Using jQuery: that would be the .height() method.

var span_height = $('#learning_menu').height(),
    div_height = $('#aLM').height();

N.B. it is invalid HTML to place a block-level element (in this case the <div>) inside of an inline element (the <span>).

Upvotes: 3

BnW
BnW

Reputation: 602

$("#learning_menu").height() will return the span's height

Upvotes: 0

Related Questions