CODEWITHSUNDEEP
javascriptjquery
Ahmed Atia
Ahmed Atia

Reputation: 17960

Get div height in pixels although its height set to 100%

I wonder if there is any way to get div height in pixels, although its height set earlier to 100% height.
This is required as div content is dynamic so div height has different values based on content itself.

[Edit] Div by default is hidden.

I need to get div height in pixels for later manipulation (smooth scrolling will be done for div)?
Is there any way to do this?

Upvotes: 11

Views: 27879

Answers (5)

Tokimon
Tokimon

Reputation: 4142

Well on slow browsers the show/hide method MIGHT cause the box to flicker (though the computer have to be really slow). So if you want to avoid this, give the div a opacity: 0 - and perhaps even a position: absolute, so it doesnt push the content. So to extend the code from before:

var $myEl  = $('#myElement').css({"opacity": "0", "position": "absolute"}).show();
var height = $myEl.height();
$myEl.hide().css({"opacity": "", "position": ""});

But again. This might be overkill.

Upvotes: 0

Andy E
Andy E

Reputation: 344537

Since you tagged jQuery, use

$("#myElement").height();

http://api.jquery.com/height/

For Plain Ol' Javascript, you can use element.clientHeight or element.offsetHeight, depending on which one suits your needs.

Since the div is hidden, you will have to .show() it before calling .height(), and you can hide it again straight away:

var $myEl  = $('#myElement').show();
var height = $myEl.height();
$myEl.hide();

Upvotes: 20

Darin Dimitrov
Darin Dimitrov

Reputation: 1038730

You could use the .height() function:

$('#divid').height()

Upvotes: 2

Russell Dias
Russell Dias

Reputation: 73282

You can use height()

$("#divInQuestion").height();

Upvotes: 3

Deniz Dogan
Deniz Dogan

Reputation: 26227

theDiv.clientHeight

Upvotes: 12

Related Questions