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 ...
随机推荐
- Node.js入门笔记（5）：案例两则
案例分析:前端自动化 1. 实现一个自动创建前端项目文件的js 通过node.js自动创建前端项目目录,包括js目录,js目录css目录,index.html和对应的内容. 初步的代码如下: var ...
- 说一说ASCLL和Unicode
关于字符编码这个展开来说有太多东西了,这里主要是想说一说最常说的ASCLL和Unicode字符编码的问题,这样至少你在用相关函数的时候,可以搞明白参数的真正含义. ASCLL编码 计算机就是0和1的世 ...
- tyvj1097 mm不哭
背景 Bless all rp++.. 描述 在一个数轴上,有n个MM(绝非恐龙!)在哭泣(5555~一直哭). tcboy也在这个数轴上,并恰好看到了这一幕,由于每个MM哭都会让tcboy损失一定的 ...
- C#模拟鼠标键盘控制其他窗口（一)
编写程序模拟鼠标和键盘操作可以方便的实现你需要的功能,而不需要对方程序为你开放接口.比如,操作飞信定时发送短信等.我之前开发过飞信耗子,用的是对飞信协议进行抓包,然后分析协议,进而模拟协议的执行,开发 ...
- SQLite的时候判断语句是否纯在：出现RuntimeException
写SQLite的时候判断语句是否纯在: public boolean exist(long id) { String filter = FRIEND_KEY_ID + "=" + ...
- UVALive 3644 X-Plosives
X-Plosives Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu [Submit] ...
- STM32f103之外部中断
一.背景 有个需求,IO口检测上升沿,然后做相应的动作.在此记录STM32F103的外部中断结构及配置方法, 以备下次快速上手使用. 有许多不太明白,又是老司机(:-D)帮忙,真的是站在别人的肩膀上会 ...
- Add Two Numbers LeetCode Java
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
- python基础六
模块 1.定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名:test.py,对应的模块名:test) 包:用来从逻辑上 ...
- SoapUI 设置 request data with json body
--背景 使用WCF定义REST风格的WebService,如下: [ServiceContract] public interface INISTService { [Op ...