Calculated height of an element using .outerHeight() or .height() doesn't consider scrollbar?

Question

I created a responsive web page in which I am trying to find the height of an element using the .outerHeight() method in jQuery like so:

(Just an example; not really how I am using it.)

jQuery(document).ready(function($){

    // Identify height of div#main
    var element_h = $('.home #main').outerHeight(true);

    // Apply same height to div#primary
    $('.home #primary').attr('style', 'height:'+element_h+'px;');

});

The problem is that the calculated height is smaller than actual height of the element when the web page is resized (and of course, reloaded).

Considering that the web page is responsive, the element's height grows when the browser is resized. jQuery's .outerHeight() and .height() methods seem to calculate height properly until the scrollbar appears -- even if the entire element is still in view.

Any idea why this is happening? What could I possibly be doing wrong?

Please describe requirement of that would fulfill question. ? — guest271314, Apr 01 '14 at 15:05
@guest271314 I asked a different question with all the context and necessary details and demo: http://stackoverflow.com/q/22789254/1071413 — its_me, Apr 01 '14 at 15:10

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

Your best bet is to detect the browser scrollbar size and make it a global variable for your detections. See how to do so by looking at this answer.

You can then assign the result to something like

$(window).data('scrollbarSize');

edited May 23 '17 at 10:31

Community

1
1

answered Apr 01 '14 at 04:31

haxxxton

6,422
3
27
57

Calculated height of an element using .outerHeight() or .height() doesn't consider scrollbar?

1 Answers1