Osama Essam Osama Essam - 4 months ago 62
CSS Question

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

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

enter image description here

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


enter image description here

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>




Answer

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>