CODEWITHSUNDEEP
javascriptjquerycss
user6213434
user6213434

Reputation:

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>

Upvotes: 5

Views: 2567

Answers (1)

Michael Schwartz
Michael Schwartz

Reputation: 8425

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>

Upvotes: 4

Related Questions