关于javascript：Jquery $(window).height()在设置文档元素的高度时给出错误的值

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

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

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

enter image description here

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

enter image description here

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

1
2
3
4
5
6
7

$(window).load(function () {

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

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3

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

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

所以，如果你试图抓住窗口/文档的高度，你可以使用...(我正在使用vanilla / plain js)

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

但是，如果你抓住一个元素的高度，如果它有填充，有时可以根据它的样式添加到元素高度，无论它的高度是0还是自动。

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

1
2
3
4

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

test.innerHTML = test.clientHeight

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

1
2
3
4

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

test.innerHTML = test.clientHeight

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1	<header class="main-header"></header>