我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题。例如，我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度，就遇到了问题。
理论上，$(window).height() 会返回浏览器窗口的最小高度(译者注，注意是窗口高度)，也就是当前浏览器当前窗口的高度。如果，你改变了窗口，这个高度值也会随之变化。
同理，你可以用 $(document).height() ，这个方法可以返回已渲染
之后页面的高度。当网页的高度小于窗口可视区域的高度时，这个方法会返回的是可视区域的高度值。也就是说，当页面的内容很少、窗口大于内容所需要的空间的时候，网页高度会比 jQuery 浏览器高度要小。
问题
但是最近在使用这两个值得时候，好像 $(window).height() 和 $(document).height() 得到的是一样的值。明显，$(window).height() 返回了一个不正确的值。
源代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
$('#winheight').text($(window).height());
$('#docheight').text($(document).height());
});
$(window).height() =
$(document).height() =
Lorem ipsum dolor sit amet, ...
结果如下：
1
2
3
4
5
6
7
8
9
10
11$(window).height() = 672
$(document).height() = 672
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate faucibus orcisit amet iaculis. Etiam at libero mi. Cras aliquet leo in turpis sollicitudin, pellentesque tincidunt orcipellentesque. Aenean dictumlobortis aliquet. Nullam blanditrhoncus orci,posuere facilisis nibh placerat et. Etiam sed justovel nisl molestie rutrum in eu ipsum. Etiam sed mattis erat, vitae malesuada metus. Nulla accumsan facilisis ligula, sit amet faucibus enim ullamcorper id. Praesent sodales dictumipsum nec vehicula. In hac habitasse platea dictumst.Integer euismod ante euismod metus convallis consectetur. Aliquam id urna sit amet ligula tempor fermentum. Integer tincidunt elementum nunc, sit amet scelerisqueenim iaculis a. Cras sed pharetra enim, sed bibendummassa. Aliquam laoreet elit ac placerat pellentesque.
Pellentesque ullamcorper et lectus quis adipiscing. Phasellus fringilla diamaugue, nec mattis ipsum porta ac. Nulla feugiat venenatis sapien, quis interdum nisi iaculis sit amet. Maecenas aliquet enim in arcu tincidunt, tincidunt porttitor arcu eleifend. Sed lobortis quam non purus interdum, eu lacinia lacus vehicula. Pellentesque et augue laoreet, mattis leo vel, congue enim. Ut fringilla erat vitae urna tincidunt porta. Curabitur scelerisquelorem id sagittis imperdiet.
Ut convallis justoid urna congue ultrices. Integer placerat mollis sem, sit amet faucibus purus consectetur eget. Fusce porta pellentesque nisi id lacinia. Etiam bibendumtempus tortor, sit amet lobortis mi adipiscing vel. Curabitur feugiat, lacus nec ornarefermentum, velit leo pulvinar neque, eu fermentum eros orcia lectus. Quisque ligula erat, auctor lacinia neque id, aliquet eleifend magna. Aliquam iaculis placerat aliquet.
Morbi a luctus nisl, commodo sagittis dolor. Proin sit amet libero quam. Fusce mattis egestas sapien, quis vulputate sapien commodo sed. Donec neque erat, feugiat nec quam nec, facilisis tempus leo. Vivamus auctor bibendumelit eu consequat. Mauris blanditest lectus, quis accumsan purus hendrerit a. Phasellus nec nisi in justocondimentum euismod. Pellentesque id arcu nunc. Phasellus in libero nec justofaucibus sollicitudin in eu massa. Vivamus faucibus purus libero, eu posuere orcitristique consectetur. Quisque urna sapien, sodales eget quam nec, sodales interdum felis. Vivamus dapibus justoeget augue malesuada, at laoreet nibh dapibus.
Donec accumsan tellus dolor, in fermentum sem egestas non. Maecenas elementum eget metus eu consequat. Nulla vel ipsum non risus interdum consectetur. Phasellus convallis in leo rhoncus viverra. Mauris consectetur in diamet pretium. Etiam bibendumelit at iaculis cursus. Vestibulum ac ligula nec odio suscipit laoreet eu eget nisl. Quisque adipiscing nunc sed mi luctus faucibus. Ut quis nisi ac ipsum venenatis sodales.
神马？！结果 $(window).height() 和 $(document).height() 竟然都返回750。窗口高度不应该是这个值，而应该是200px。很明显，页面document会更大一些，因为它有滚动条。
那么问题来了，为神马 jQuery 对于 window 和 document 都得到一样的高度？事实上，少了某个简单的东西。
解决
因为我们的 HTML 页面里面没有做 DOCTYPE 声明，所以可以这么说它不是一个有效的 HTML 。如果 doctype 没有指定文档类型，jQuery 也不会正确的计算 window height 和 document height 。 声明不是一个HTML标签；它是什么版本的HTML页面是用Web浏览器的指令。
所以，我们就试一下，把这个指令加到html页面里面，然后看看结果怎么样。
代码如下：
1
2
3
4
5
//..
结果如下：
1
2
3
4
5
6
7
8
9
10
11$(window).height() = 200
$(document).height() = 672
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate faucibus orcisit amet iaculis. Etiam at libero mi. Cras aliquet leo in turpis sollicitudin, pellentesque tincidunt orcipellentesque. Aenean dictumlobortis aliquet. Nullam blanditrhoncus orci,posuere facilisis nibh placerat et. Etiam sed justovel nisl molestie rutrum in eu ipsum. Etiam sed mattis erat, vitae malesuada metus. Nulla accumsan facilisis ligula, sit amet faucibus enim ullamcorper id. Praesent sodales dictumipsum nec vehicula. In hac habitasse platea dictumst.Integer euismod ante euismod metus convallis consectetur. Aliquam id urna sit amet ligula tempor fermentum. Integer tincidunt elementum nunc, sit amet scelerisqueenim iaculis a. Cras sed pharetra enim, sed bibendummassa. Aliquam laoreet elit ac placerat pellentesque.
Pellentesque ullamcorper et lectus quis adipiscing. Phasellus fringilla diamaugue, nec mattis ipsum porta ac. Nulla feugiat venenatis sapien, quis interdum nisi iaculis sit amet. Maecenas aliquet enim in arcu tincidunt, tincidunt porttitor arcu eleifend. Sed lobortis quam non purus interdum, eu lacinia lacus vehicula. Pellentesque et augue laoreet, mattis leo vel, congue enim. Ut fringilla erat vitae urna tincidunt porta. Curabitur scelerisquelorem id sagittis imperdiet.
Ut convallis justoid urna congue ultrices. Integer placerat mollis sem, sit amet faucibus purus consectetur eget. Fusce porta pellentesque nisi id lacinia. Etiam bibendumtempus tortor, sit amet lobortis mi adipiscing vel. Curabitur feugiat, lacus nec ornarefermentum, velit leo pulvinar neque, eu fermentum eros orcia lectus. Quisque ligula erat, auctor lacinia neque id, aliquet eleifend magna. Aliquam iaculis placerat aliquet.
Morbi a luctus nisl, commodo sagittis dolor. Proin sit amet libero quam. Fusce mattis egestas sapien, quis vulputate sapien commodo sed. Donec neque erat, feugiat nec quam nec, facilisis tempus leo. Vivamus auctor bibendumelit eu consequat. Mauris blanditest lectus, quis accumsan purus hendrerit a. Phasellus nec nisi in justocondimentum euismod. Pellentesque id arcu nunc. Phasellus in libero nec justofaucibus sollicitudin in eu massa. Vivamus faucibus purus libero, eu posuere orcitristique consectetur. Quisque urna sapien, sodales eget quam nec, sodales interdum felis. Vivamus dapibus justoeget augue malesuada, at laoreet nibh dapibus.
Donec accumsan tellus dolor, in fermentum sem egestas non. Maecenas elementum eget metus eu consequat. Nulla vel ipsum non risus interdum consectetur. Phasellus convallis in leo rhoncus viverra. Mauris consectetur in diamet pretium. Etiam bibendumelit at iaculis cursus. Vestibulum ac ligula nec odio suscipit laoreet eu eget nisl. Quisque adipiscing nunc sed mi luctus faucibus. Ut quis nisi ac ipsum venenatis sodales.
哇擦，居然真行。所以呀，不要忘记在你的 html 页面加上 DOCTYPE 声明。最好使用一些 IDE 编辑器什么的帮你去创建 html 文件，因为这些编辑器会自动帮你检查这个。
