想看解决方案不想看无聊乏味的bug解决过程的同学，请直接跳转到页面底部~

今天在做项目的过程中遇到了一个BUG，项目中需要获取到浏览器客户区的高度以方便做一些适应性调整，代码如下：

$(document).ready(function(){var $content_height = $(window).height() - 30 - 53;var $nav_box_content_height = $content_height - 31 - 7;$("#nav_box_content").css("height",$nav_box_content_height);$(".main-container").css("min-height",$content_height);})

然而在部署到服务器之后，出现了bug，本身应有的响应动作并没有发生，也没有产生任何报错。原因是$(window).height()获取到了一个定值，也不会随着浏览器窗口大小的变化而变化，百思不得其解。然后就开始各种alert程序中的变量寻找错误点（别吐槽，我知道大神们都用console。。。  ），开始的时候因为思维混乱，并没有在意这个定值的意义。一顿瞎试之后突然想到应该关注这个数字的意义，猜想会不会是获取到了文档高度。于是做出了尝试，alert了$(document).height()，果然相同。这时又到了百思不得其解的时刻了。

。。。。。。

。。。。。。

不知道大家看到上面的图有没有发现什么。对，问题在于HTML5的文档声明并没有被浏览器解析到，在用了正确的html5文档声明后，bug果然消失了。贴出我的错误代码：

。。。。。

改过之后的代码是这样的：

在浏览器中的解析：

会发现HTML5文档声明已经被浏览器解析到。、

查阅相关文档发现，webkit内核的浏览器中，如果没有正确的HTML5文档声明的话，便会出现$(window).height()获取到的值永远等于$(document).height()这样的bug，深层原因不清楚，对Jquery源码了解很深的人可以研究研究为啥会出现这个bug。  另外，亲测了非webkit内核的浏览器不会出现这样的bug。

补充一些相关知识：

一、 HTML文档声明：Web世界中存在很多种类的文档，只有告诉浏览器本文档的文档类型，浏览器才能正确的解析文档进行显示。HTML中的<!DOCTYPE>标签就用来给浏览器提供信息，告诉浏览器本HTML文档是用什么版本编写的。

二、HTML5文档声明：  目前常用的是

<!DOCTYPE html> <html>!-- 文档内容 --></html>

这个是一种简略写法，完整的写法是这样的

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

这两种写法并没有什么区别，现在相当多的产品也都使用的简略写法。

三、浏览器客户区高度与文档高度： 浏览器客户区高度是指浏览器可视区域的高度，而文档高度是整个页面的高度。宽度同理，获取他们的方法是：

浏览器客户区：
$(window).height()
$(window).width()
文档区：
$(document).height()
$(document).width()
总结：   出现$(window).height()获取不正常并等于$(document).height()是由于没有正确的HTML5文档声明导致的，并且仅在webkit内核中会有此问题。

转载于:https://www.cnblogs.com/zhuwq585/p/5400986.html

Bug整理——$(window).height()获取到$(document).height()的问题相关推荐

  1. $(window).height() 和 $(document).height()的区别

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...

  2. (document).height()与$(window).height()

    http://www.cnblogs.com/piuba/archive/2013/01/06/2847295.html jQuery(window).height()代表了当前可见区域的大小,而jQ ...

  3. $(window).height()和$(document).height()返回值尽然出现了一样的情况

    最近在开发过程中遇到了一个很奇怪的问题,本来是想着在前端点击工具栏的按钮弹出的窗口居中显示,是利用$(window).height()减去弹出窗口的高度并处以2来使窗口居中显示,但是弹出窗口却不听话, ...

  4. 获取页面高度 height scroll

    按 F11 浏览器全屏后高度会增加,尤其需要注意 function f(){ document.querySelector('div[widgetname=FORM]').style='';docum ...

  5. jquery height 获取不到隐藏元素高度的问题

    今天在写js的时候遇到这样一个场景,页面上有两个tab页,其中有相同的两个div.在切换的时候需要获取该div的高度,然后做相应的判断.结果发现使用$('').height();获取高度的时候,一个可 ...

  6. Window插件获取窗口坐标

    本帖最后由 兄弟工程师05 于 2013-3-22 09:01 编辑 Window插件获取窗口坐标[code]Call RunApp("notepad.exe") Delay 15 ...

  7. 解决《获取My Document目录错误，可能”我的文档“目录不存在》

    打开安装好的程序会出现下面的错误 解决<获取My Document目录错误,可能"我的文档"目录不存在> 方法:开始-运行-搜索regedit.exe打开注册表 依次打 ...

  8. html height 100%无效,css height:100%撑不起来怎么解决？

    css height:100%撑不起来怎么解决?下面本篇文章居来给大家介绍一下解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css height:100%撑不起来的解决方 ...

  9. window screen (获取屏幕信息)

    document.write("屏幕宽度"+screen.width);document.write("屏幕高度"+screen.height);//(整个电脑 ...

最新文章

  1. C#判断文件是否存在方法
  2. spring cloud 微服务相关信息
  3. 線陣相機處理時間計算方法
  4. ios did receive memory warning
  5. 使用AspectJ，Javassist和Java Proxy进行代码注入的实用介绍
  6. 3DTouch - iOS新特性
  7. 荣耀Magic4性能体验超苹果再次实锤！非官方游戏性能对比出炉
  8. Java并发编程-ThreadPool线程池
  9. 结合内存分析java归并排序_排序算法之归并排序（Mergesort）解析
  10. 金华资产封存页面问题
  11. 问题六十八：着色模型（shading model）（1）——反射模型（reflection model）（3.1）——辐射学（Radiometry）
  12. 后盾网php微博系统,后盾网thinkphp5.0 博客系统实现
  13. 设置低电平有效，即取反
  14. linux下 pxe服务器,Linux 的 PXE 与 UEFI PXE 依赖服务器配置
  15. 【李小丫的笔记】DataWhale金融风控预测Task1
  16. 上海富爸爸_放弃高薪选择财务自由之路(转)
  17. 【时间序列分析】03. 谱密度
  18. 80老翁谈人生（156）：老翁为何笃爱互联网？
  19. html5 ios keychain,iOS 用keychain钥匙串保存账号、设备UUID及APP间共享
  20. 当你程序运行出现错时~

热门文章

  1. 【每天读一遍，不久你就会变！】【送给迷茫的朋友】
  2. 谱聚类（spectral clustering）理解
  3. 【正一专栏】评《我的前半生》——我们需要怎样的价值观
  4. Ubuntu解决gedit warning问题的方法
  5. Leetcode 257. 二叉树的所有路径 解题思路及C++实现
  6. quirks 模式是什么?它和 standards 模式有什么区别_什么是二级分销模式
  7. SQL优化—— 大批量插入数据
  8. 用html和js写一个直接在页面运行js的页面
  9. windows 关闭粘滞键-解决Microsoft Remote Desktop输入自动变为快捷键问题
  10. win10 安装xilinx 14.7 之后打开new project 奔溃解决方法