We need to get the div height and width when these properties not defined. Here in this article, get div height using javascript when div height is auto. Many times we need to get the div or any DOM elements height and width when these properties not defined.

get div height using javascript when div height is auto

Lets say I kept div height auto and width as 200px fix and data is dynamic for eash user. So how we can get the div height.

take div height from javascript

take div height from javascript

We can use two javascript functions for fetching the div height.
1. offsetHeight – this will return the value which are specified in your CSS

2. clientHeight – this function will return real inner height of element that does not matter about CSS.
I recomend to use this function.

Exmaple code as follows:

<style>
#wordpressapidiv{ width:200px; height:auto;border:#ccc 1px solid}
</style>
wordpressapidiv">
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.

This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content.
</div>

<script>
function getDivHeight(divID){
gd = document.getElementById(divID).clientHeight;
alert(gd);
}

function getDivWidth(divID){
gw = document.getElementById(divID).clientWidth;
alert(gw);
}

</script>

<input name="test" type="button" onclick="getDivHeight('wordpressapidiv')" >

Function above code you can fetch the div height and width using the javascript.

Written by Purab Kharat

I Purab am from India, Pune. I am WordPress and Drupal Architect and consultant. I worked on many technologies like Ruby on Rails, Flex, PHP, jQuery etc... Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA.I contributed to many wordpress plugins and Drupal Modules. I contributed to Drupal core also.Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on Google+ or Write Mail to purabdk@gmail.com or Chat with me on Skype : purabdk

This article has 1 comment

  1. Ashriya Reply

    Help!!!! Neither of the 2 properties clientHeight and offsetHeight works for me! Could some one suggest any alternatives to find out the height of a div dynamically? Thanks a ton in advance.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>