为文档元素设置高度时，Jquery $(window).height() 给出了错误的值

Question

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

当我为.main-header div 设置height 0 时的这张图片

当我为 .main-header 设置 700px height 时

我试过 $(window).load() 和 $(document).ready() 并且都给出了相同的值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 1

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

编织： 纯 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>