Need help with getting height of a div...

Hi,

I'm trying to programmatically / dynamically get the height of a div (containing data that dynamically increases the height of the div) in pixels using javascript. Based the javascript code below, the alert always shows a div height of 0. But if I specifically set a fixed height for the div (for example,  <div id="sidebar" style="height:150px;width:500px;border:1px solid #ccc;padding:10px;">), then the alert shows the correct fixed height of the div, which is 150. How do I get the dynamic height in pixels?

    <div id="sidebar" style="width:500px;border:1px solid #ccc;padding:10px;">
        <div id="leftNav">
            <div id="product">
                        Products
                  </div>            
            <div id="productList">
                <ul>
                              <li>Product 1</li>
                              <li>Product 2</li>
                              <li>Product 3</li>
                </ul>
            </div>            
            <div id="service">
                        Services
                  </div>
            <div id="serviceList">
                <ul>
                              <li>Service 1</li>
                              <li>Service 2</li>
                              <li>Service 3</li>
                </ul>
            </div>
        </div>                                  
   </div>
<script type="text/javascript">
      var h = document.getElementById('sidebar').style.pixelHeight;
      alert('div height = ' + h);
</script>

Many thanks in advance.
WebAppDeveloperAsked:
Who is Participating?
 
Atr3idesConnect With a Mentor Commented:
Here's the result of using those, with your HTML, in FF and Chrome, with Firebug/Dev tools active

 
<div id="sidebar" style="border:1px solid #ccc;padding:10px;">
        <div id="leftNav">
            <div id="product">
                        Products
                  </div>            
            <div id="productList">
                <ul>
                              <li>Product 1</li>
                              <li>Product 2</li>
                              <li>Product 3</li>
                </ul>
            </div>            
            <div id="service">
                        Services
                  </div>
            <div id="serviceList">
                <ul>
                              <li>Service 1</li>
                              <li>Service 2</li>
                              <li>Service 3</li>
                </ul>
            </div>
        </div>                                  
   </div>
<script type="text/javascript">
    var h = document.getElementById('sidebar').height;
    console.log('div height = ' + h);
    var h = document.getElementById('sidebar').pixelHeight;
    console.log('div height = ' + h);
    var h = document.getElementById('sidebar').clientHeight;
    console.log('div height = ' + h);
    var h = document.getElementById('sidebar').offsetHeight;
    console.log('div height = ' + h);
</script>

Open in new window


Firefox:
div height = undefined
div height = undefined
div height = 244
div height = 246

Open in new window


Chrome:
div height = undefined
test.html:29div height = undefined
test.html:31div height = 244
test.html:33div height = 246

Open in new window

0
 
Atr3idesCommented:
Try this
var h = document.getElementById('sidebar').offsetHeight;
alert('div height = ' + h);
0
 
WebAppDeveloperAuthor Commented:
Atr3ides,

document.getElementById('sidebar').offsetHeight; does NOT work neither.  The alert says "div height = undefined"
0
 
WebAppDeveloperAuthor Commented:
I've  tried all these, but they don't work:

var h = document.getElementById('sidebar').height;
var h = document.getElementById('sidebar').pixelHeight;
var h = document.getElementById('sidebar').clientHeight;
var h = document.getElementById('sidebar').offsetHeight;

0
 
WebAppDeveloperAuthor Commented:
Suddenly, the following are now working for me.

var h = document.getElementById('sidebar').clientHeight;
var h = document.getElementById('sidebar').offsetHeight;

Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.