title: jQuery height function returns different values
body: <p>I am developing a website for my company, and I decide to use Bootstrap and jQuery to make it go faster. I went to show my website to a co-worker and it didn't look the same as on my computer. After digging further I found the jQuery <code>height</code> method was the culprit.</p>
  
  <p>Using the JavaScript console I found on his computer...</p>
  
  <pre><code>$('header').height() == 277.552
  $('header').outerHeight() == 397.552
  $('header').length == 1
  </code></pre>
  
  <p>...and on my computer...</p>
  
  <pre><code>$('header').height() == 158
  $('header').outerHeight() == 278
  $('header').length == 1
  </code></pre>
  
  <p>The part that stumps me is that we both are using Windows 7 and Chrome 69.0.3497.100. Does anyone have a clue as to why this may be happening, or a better way to dynamically find the height of an element? I believe it is irrelevant, but here is my code I am using.</p>
  
  <pre><code>$('.sidenav').css('padding-top', Math.max($('header').outerHeight() - $(window).scrollTop(), 50) + 30);
  </code></pre>