Why does height() return a completely even number regardless of window size in jQuery?

Question

I am trying to determine the height of a specific element on my page. I have not set the height in the CSS, and regardless of the size of the window, the following code always returns the integer '100'.

var img_h = $("#compare_view").height();
    console.log(img_h);

When I try a different div element on the page, it returns the integer '20'.

This is despite the fact that when I look at the element in Chrome's developer tools, it shows me a height of 415px or some other height in pixels (which is accurate).

Edit: Ok...it seems I have figured out that it is because it is returning a height of 100% for the parent element, and because there are 5 divs within the parent, each has a height of 20%. So I guess my new question is...how do I get it to return it in PX and not percent even though it is not set in Pixels?

Edit 2: Ok....that wasn't true. I just edited it using the following code instead var img_h = $("#compare_view").css('height'); console.log(img_h); and it returned '100px'

So it is returning the value of the height in Pixels, but is clearly not accurate. So I am still at the original place I was - i.e. not sure why it is returning those weird numbers.

Edit 3: Here is the relevant CSS - this is the only section that is related to this div id:

#compare_view #compv-navbar {   
    font-weight: bold;
    background: #f9f4c0;
    height: 23px;
    width: 220px;
    border: 1px solid #c97d7d;
    word-spacing: 0px;
    letter-spacing: 2px;
    margin: 0 0 15px 0;    /* top, right, bottom, left */       
    padding: 5px 0px 7px 0px;    /* top, right, bottom, left */ 
}

Note that this is not specifically to the div id="compare_view", but rather a child of compare_view.

compare_view has no height set in the stylesheet throughout my site.

Answer 1

The height() method of jQuery returns the calculated height of an element. You see the difference because there are chances that element's height gets changed at some point/event during the load of the page. You need to check your inline styles, css or any javascript that might be changing its height.