Jquery $(window).height() gives wrong value when setting height for document element

Question

So my problem is when i get $(window).height() of an empty document it gives the correct value, but when i set a height for the div (.main-header) the $(window).height() gives it's value plus value close to the div height ,

this picture when i set a height 0 for the .main-header div

and this when i set 700px height for .main-header

i have tried $(window).load() and $(document).ready() and both gave same value https://jsfiddle.net/nev5onff/

$(window).load(function () {

  var  header = $('.main-header'),
       windowH = $(window).height();
  $('.test').text( windowH);

});

.main-header {
    width: 100%;
    height: 700px;
    box-shadow: 0 1px 4px #888;
    position: relative;
    overflow: hidden;
}

.test {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    float: left;
    height: 100px;
    background-color: #eee;
    color: #000;
    padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="test"></div>
<header class="main-header"></header>

score 4 · Accepted Answer · edited May 23 '17 at 12:00

I'm not sure if I understand your question, but I'll try and answer the best I can.

Weave: Pure JS
http://kodeweave.sourceforge.net/editor/#f722c9d64b3e290ec7cc9b4c1a6d19b8

So if you're trying to grab the height of your window/document you can use... (I'm using vanilla/plain js)

var test = document.querySelector('.test');
test.textContent = window.innerHeight;

However if you were grabbing the height of an element, if it has padding that sometimes can add to the elements height depending on how it's styled regardless if it's height is 0 or auto.

In some cases you may want to use clientHeight over innerHeight source

var test = document.querySelector('.test'),
    mainHeader = document.querySelector('.main-header');

test.innerHTML = test.clientHeight

Here's a simple fiddle demonstrating this process.

var test = document.querySelector('.test'),
    mainHeader = document.querySelector('.main-header');

test.innerHTML = test.clientHeight

.main-header {
  width: 100%;
  height: 700px;
  box-shadow: 0 1px 4px #888;
  position: relative;
  overflow: hidden;
}

.test {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  float: left;
  height: 100px;
  background-color: #eee;
  color: #000;
  padding: 20px;
}

<div class="test"></div>
<header class="main-header"></header>

Your answer is very useful but i need to get window height to set header height based on it, but when i make that it gives value greater than window height , i appreciate your help. — , May 17 '16 at 23:55
The height is correct. I think you might be possibly confusing the default body [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). You could use [normalize](https://necolas.github.io/normalize.css/), or you can do [this little trick](http://kodeweave.sourceforge.net/editor/#9c850d05079a1074760798ced6c8d7c9) in CSS with position and margin to fix that. — Michael Schwartz, May 18 '16 at 00:19
thank you very much, the height trick has solved my problem, thanks for your time. — , May 18 '16 at 00:26

Jquery $(window).height() gives wrong value when setting height for document element

1 Answers1