Jquery $（window）.height（）在设置文档元素的高度时给出错误的值

Question

所以我的问题是，当我得到一个空文档的$(window).height()时，它会给出正确的值，但是当我为div设置一个高度（.main-header）时，$(window).height()会给它＆＃ 39; s值加上接近div高度的值，

当我为height div

设置.main-header 0时，这张照片

这是我为height

设置700px .main-header时的情况

我试过$（window）.load（）和$（document）.ready（）并且都给出了相同的值https://jsfiddle.net/nev5onff/

＆＃13;

＆＃13;

$(window).load(function () {

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

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不确定我是否理解你的问题，但我会尽力回答。

编织： Pure JS
http://kodeweave.sourceforge.net/editor/#f722c9d64b3e290ec7cc9b4c1a6d19b8

因此，如果您尝试抓取窗口/文档的height，则可以使用...（我正在使用vanilla/plain js）

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

但是如果你抓住了一个元素的height，如果它有padding，有时可以添加到元素height，具体取决于它的样式，无论它的高度是0还是汽车。

在某些情况下，您可能希望clientHeight使用innerHeight source

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

test.innerHTML = test.clientHeight

这是一个简单的小提示，展示了这个过程。

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>