想看解决方案不想看无聊乏味的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内核中会有此问题。

Bug整理——$(window).height()获取到$(document).height()的问题的更多相关文章

  1. js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别

    <script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...

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

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  3. (document).height()与$(window).height()区别

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  4. 网页上弹出pop窗口实例，(document).height()与$(window).height()的区别

    #dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...

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

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

  6. window + document + height

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.     注意当浏览器窗口大小改变 ...

  7. $(document).height 与$(window).height的区别

    $(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)$(document).scrollLeft() 这是获取水平滚动条的距离 要获取 ...

  8. $(window).scrollTop() == $(document).height() - $(window).height()（底端）

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  9. (document).height()、$(document).scrollTop()

    (document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery ...

随机推荐

  1. Fedora 24 Gnome Boxes 无法ping通网络

    安装Fedora 24在试用虚拟机时发现无法ping通外网. 我傻傻地以为是软件问题. 问题描述: 尝试ping程序来测试网络连通性: (我之前也是ping百度,后来在为了少打字百度了一些比较短的域名 ...

  2. [Math & Algorithm] 拉格朗日乘数法

    拉格朗日乘数法(Lagrange Multiplier Method)之前听数学老师授课的时候就是一知半解,现在越发感觉拉格朗日乘数法应用的广泛性,所以特意抽时间学习了麻省理工学院的在线数学课程.新学 ...

  3. Solr5.4.0部署到Tomcat

    所用工具 下载 solr 5.4.0 版本:http://www.apache.org/dyn/closer.lua/lucene/solr/5.4.0 下载 Tomcat(6以上版本),另外可以根据 ...

  4. PHP判断变量是否存在及函数isset() 、empty()与is_null的区别

    一.举例说明 A.如何判断一个变量是否定义? <?php // 假设不存在$test 变量 if (isset($test)) { echo '$test 已经set', '<br/> ...

  5. Linux进程间通信（八）：流套接字 socket()、bind()、listen()、accept()、connect()、read()、write()、close()

    前面说到的进程间的通信,所通信的进程都是在同一台计算机上的,而使用socket进行通信的进程可以是同一台计算机的进程,也是可以是通过网络连接起来的不同计算机上的进程.通常我们使用socket进行网络编 ...

  6. Javascript闭包深入解析及实现方法

    1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...

  7. 在vs中char类型的实参与LPCWSTR类型的形参类型不兼容怎么解决？

    今天在做 COS脚本解释器的时候,遇到了这个问题 先了解一下 LPCTCHAR 这个东东 LPCTSTR用来表示你的字符是否使用UNICODE, 如果你的程序定义了UNICODE或者其他相关的宏,那么 ...

  8. 启动调试IIS时，vs无法在 Web 服务器上启动调试。Web 服务器未能找到请求的资源。 有关详细信息，请单击“帮助”。

    问题截图 1.检查 是否设置了本地IIS 2.检查IIS端口是否为80 3.默认网站设置是否正确 可参考,查看网站绑定是否正确

  9. html中表格元素的相关总结

    表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...

  10. volatile关键字详解

    本文系转载,原文链接:http://www.cnblogs.com/Chase/archive/2010/07/05/1771700.html,如有侵权,请联系我:534624117@qq.com 引 ...