Bug整理——$(window).height()获取到$(document).height()的问题
想看解决方案不想看无聊乏味的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()
Bug整理——$(window).height()获取到$(document).height()的问题的更多相关文章
- js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别
<script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...
- (document).height()与$(window).height()
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...
- (document).height()与$(window).height()区别
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...
- 网页上弹出pop窗口实例，(document).height()与$(window).height()的区别
#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...
- $(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...
- window + document + height
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变 ...
- $(document).height 与$(window).height的区别
$(document).scrollTop() 获取垂直滚动的距离 (即当前滚动的地方的窗口顶端到整个页面顶端的距离)$(document).scrollLeft() 这是获取水平滚动条的距离 要获取 ...
- $(window).scrollTop() == $(document).height() - $(window).height()（底端）
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...
- (document).height()、$(document).scrollTop()
(document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery ...
随机推荐
- windows 7 docker oralce安装和使用
7. oracle数据库的安装 7.1 下载镜像 查询:Docker search Oracle 下载: docker pull wnameless/oracle-xe-11g 如果不能下载,有可能是 ...
- G-FAQ – Why is Bit Depth Important?
直接抄: https://apollomapping.com/2012/August/article15.html For this month’s Geospatial Frequently Ask ...
- thinkphp分页
thinkphp默认分页 html代码 <div class="f_r"> {$page} </div> 一:最简单的分页 $m = M('stock_lo ...
- [nginx学习之道]linux的nginx安装
准备:首先要安装下一些gcc库用于编译 和一些nginx的扩展lib包: [root@localhost nginx-]# yum -y install gcc gcc-c++ autoconf au ...
- Java---类加载机制，构造方法，静态变量，（静态）代码块，父类，变量加载顺序
直接上代码: 代码1: public class ConstroctTest { private static ConstroctTest test = new ConstroctTest(); // ...
- App-Pass the password
V1.0 初始版本 注册一个帐号却不想使用简单密码? Pass the Password! 输入任意字符串,如反写或截取网站域名,我们帮你生成高安全性密码. 记住规则,忘记密码 . 下一次依照你的规则 ...
- Java Web 学习链接
解决JSP中文乱码问题:http://www.cnblogs.com/chengkai/articles/2171848.html 编程思想之多线程与多进程:http://blog.csdn.net/ ...
- java基本知识小记（1）
1.Java中的值传递 值传递意味着对于传给方法的每个参数都会制作一份副本然后将副本而不是原始值传递给方法并且通过参数的名进行引用. 注意:虽然传值机制对于所有参数类型都适用,但是他对对象类型的作用与 ...
- PHP常用字符串的操作函数
字符串转换类函数 addcslashes函数:以C语言风格使用反斜线转义字符串中的字符 addslashes函数:使用反斜线引用字符串 chop函数:清除字符串中的连续空格 get_html_tran ...
- word20161215
name / 名称 name mapping / 名称映射 name resolution / 名称解析 name server (NS) resource record / 名称服务器资源记录 na ...