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 ...
随机推荐
- No module named migrate.versioning
在学习mega-tutorial的数据库章节时创建数据库遇到了问题,在stackoverflow上找到了结果 pip install sqlalchemy==0.7.9 pip install sql ...
- cf723a The New Year: Meeting Friends
There are three friend living on the straight line Ox in Lineland. The first friend lives at the poi ...
- MSYS2的源配置
关于MSYS2的文章可以参考下面的链接,笔者不多赘述: msys2安装笔记 MSYS2 + MinGW-w64 + Git + gVim 环境配置 msys2环境搭建 msys2安装g++: pacm ...
- SSAS动态添加分区（一）
一.动态分区的好处就不说了,随着时间的推移,不可能一个度量值组都放在一个分区中,处理速度非常慢,如何动态添加分区,如何动态处理分区,成为了很多新手BI工程师一个头痛的问题,废话不多说,分享一下我的经验 ...
- PHP如何判断一个数组是一维数组或者是二维数组？用什么函数？
如题:如何判断一个数组是一维数组或者是二维数组?用什么函数? 判断数量即可 <?php if (count($array) == count($array, 1)) { echo '是一维数组' ...
- PHP5不重新编译，如何安装自带的未安装过的扩展，如soap扩展？
在虚拟机的CentOS5.5中,一键安装了PHP运行环境,但发现并没有 soap 扩展,而近期项目用需要用到 webservice. 上述的一键安装(lamp0.4),其实是源码编译安装,PHP配置文 ...
- 关于CDN的认识
传统的未加缓存服务的访问过程: 用户提交域名→浏览器对域名进行解释→得到目的主机的IP地址→根据IP地址访问发出请求→得到请求数据并回复 由上可见,用户访问未使用CDN缓存网站的过程为: 1).用户向 ...
- Caffe学习系列（17）： caffe源码分析 vector<Blob<Dtype>*>& bottom（转）
转自:http://blog.csdn.net/qq_14975217/article/details/51524042 Blob:4个维度 n x c x h x w: bottom[0] .bot ...
- PHP学习-链接数据库
链接数据库文件:conn.php <?php $conn = mysql_connect("localhost:3306","root","us ...
- BZOJ 1131: [POI2008]Sta
Description 一棵树,问以那个节点为根时根的总和最大. Sol DFS+树形DP. 第一遍统计一下 size 和 d. 第二遍转移根,统计答案就行了. Code /************* ...