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 ...
随机推荐
- centos 7.1 apache 源码编译安装
Apache编译安装 一,需要软件: http://mirrors.cnnic.cn/apache//apr/apr-1.5.2.tar.gz 1.apr-1.5.2.tar.gz http://mi ...
- redis教程（整理中）
一.redis简介 1.Redis:键值对类型的内存数据库:应用于高并发和实时请求的场景: 2.Redis常用数据类型: (1) string(基本数据类型) (2)hash 注:hash中的 ...
- PHP ajax基础
后台对数据处理,并返回前台: <?php //接收 $action = $_GET['action']; if ($action == 'orderID') { $orderID = trim( ...
- Spring系列之谈谈对Spring IOC的理解
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IOC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- [UML]UML系列——包图Package
系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class ...
- WP8下实现刮刮乐(橡皮擦)功能
说到刮刮乐这个功能,我们最先想到的是上下两张(长方形)重叠,之后对上面这张图片进行操作. 我的想法是:通过手势,让手指划过的地方变成透明的,底部就会显示了. 那如何让图片变为透明呢?这就要对图片的像素 ...
- 只用@property定义一个属性speed，子类不能直接用_speed，需要在interface的成员变量列表里写上_speed
//写法一: @interface Person : NSObject { } @property (nonatomic, strong) NSString *name; @end @implemen ...
- 删除Tomcat服务及其它注意
使用sc delete Tomcat7(注意服务名是Tomcat7 不是Apache......Tomcat7.0). 绿色版无法启动的话,需要先ervice.bat install注册一下服务. 如 ...
- JQuery EasyUI DataGrid获取当前行或选中行
1.获取当前选中行,如果没有选中行,则返回 null var row = $('#gridID').datagrid('getSelected'); 2.获取当前所有选中行数据,返回元素记录的数组数据 ...
- [转载]Java数组扩容算法及Java对它的应用
原文链接:http://www.cnblogs.com/gw811/archive/2012/10/07/2714252.html Java数组扩容的原理 1)Java数组对象的大小是固定不变的,数组 ...