浅谈DOCTYPE对$(window).height()取值的影响

前言:公司项目需要用到一个弹框垂直居中，网上类似的垂直居中弹出层大同小异，因为项目是基于Jquery 下的，所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移。测了各种浏览器没问题，后台人员移值到项目中后，出问题了，当页面超出一屏时，在 chrome和FF下，弹出框不是在当前屏的垂直居中，而是相对于整个网页的居中。

查阅各方资料，所有结论都指出：

1.窗口高度，$(window).height()

2.文档高度，$(document).height()

3.被卷起的高度，$(window).scrollTop()

找到原因:而后，发现后台人员的页面没有设DOCTYPE，所以在chrome中，$(window).height()=$(document).height()，$(document).height()表示在网页实际内容高度没有满一屏时表示整个窗口的高度(窗口放大缩小时这个值会变化)，页当超过一屏时表示为整个网页内容的实际高度，这点没有异议，跟设不设DOCTYPE没有影响。但是:$(window).height()在DOCTYPE为transitional.dtd时无论网页内容实际高度超不超出满屏情况下，都等于是整个窗口的高度(窗口放大缩小时这个值会变化)，如果没有设DOCTYPE则$(window).height()=$(document).height()，在即当内容超一屏时$(window).height()为网页实际高度，并不是所说的等于窗口高度。

解决办法：

s要取得窗口的高度，只能根据DOCTYPE来做相应的更改，在没有设DOCTYPE时做如下处理

if($(document).height()>=$(window).height()){
  _windowHeight=document.body.clientHeight;
  }else{//alert($(window).height());
  _windowHeight=$(document).height();
  };

在有设DOCTYPE为transitional.dtd时，windowHeight=$(window).height()

以上这篇浅谈DOCTYPE对$(window).height()取值的影响就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈DOCTYPE对$(window).height()取值的影响

    前言:公司项目需要用到一个弹框垂直居中,网上类似的垂直居中弹出层大同小异,因为项目是基于Jquery 下的,所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移.测了各种浏览器没问题,后台人员移值到项目中后,出问题了,当页面超出一屏时,在 chrome和FF下,弹出框不是在当前屏的垂直居中,而是相对于整个网页的居中. 查阅各方资料,所有结论都指出: 1.窗口高度,$(window).height() 2.文

  • 浅谈numpy生成数组的零值问题

    今天在用numpy写sinc函数时偶然发现在x=0时函数居然能取到1,觉得很不可思议,按理来说在x=0时函数无意义,研究了一下,发现竟然时numpy在生成数组时自动用一个很小的数代替了0. In[2]: import numpy as np In[3]: np.arange(-1, 1, 0.1) Out[3]: array([ -1.00000000e+00, -9.00000000e-01, -8.00000000e-01, -7.00000000e-01, -6.00000000e-01,

  • 浅谈Redis存储数据类型及存取值方法

    浅谈Redis存储数据类型及存取值方法

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合) String存取值: 是 redis 最基本的类型 一个 key 对应一个 value.value其实不仅是String,也可以是数字.string 类型是二进制安全的.意思是 redis 的 string 可以包含任何数据.比如jpg图片或者序列化的对象.string 类型是 Redis 最基本的数据类型,string 类型的值最大能存储 512M

  • 浅谈innodb_autoinc_lock_mode的表现形式和选值参考方法

    前提条件,percona 5.6版本,事务隔离级别为RR mysql> show create table test_autoinc_lock\G *************************** 1. row *************************** Table: test_autoinc_lock Create Table: CREATE TABLE `test_autoinc_lock` ( `id` int(11) NOT NULL AUTO_INCREMENT, `

  • 浅谈JavaScript 函数参数传递到底是值传递还是引用传递

    在传统的观念里,都认为JavaScript函数传递的是引用传递(也称之为指针传递),也有人认为是值传递和引用传递都具备.那么JS的参数传递到底是怎么回事呢?事实上以下的演示也完全可以用于Java 首先来一个比较简单的,基本类型的传递: function add(num){ num+=10; return num; } num=10; alert(add(num)); aelrt(num); //输出20,10 对于这里的输出20,10,按照JS的官方解释就是在基本类型参数传递的时候,做了一件复制

  • 浅谈tensorflow中张量的提取值和赋值

    tf.gather和gather_nd从params中收集数值,tf.scatter_nd 和 tf.scatter_nd_update用updates更新某一张量.严格上说,tf.gather_nd和tf.scatter_nd_update互为逆操作. 已知数值的位置,从张量中提取数值:tf.gather, tf.gather_nd tf.gather indices每个元素(标量)是params某个axis的索引,tf.gather_nd 中indices最后一个阶对应于索引值. tf.ga

  • 浅谈keras使用中val_acc和acc值不同步的思考

    在一个比较好的数据集中,比如在分辨不同文字的任务中,一下是几个样本 使用VGG19,vol_acc和acc基本是同步保持增长的,比如 40/40 [==============================] - 23s 579ms/step - loss: 1.3896 - acc: 0.95 - val_loss: 1.3876 - val_acc: 0.95 Epoch 13/15 40/40 [==============================] - 23s 579ms/st

  • 浅谈JavaScript窗体Window.ShowModalDialog使用

    Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等. 然而IE提供更多的方法支持对话框.如: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性. wi

  • 浅谈如何使用python抓取网页中的动态数据实现

    我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念,动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到浏览器后动态生成的,而之前并没有的. 在编写爬虫进行网页数据抓取的时候,经常会遇到这种需要动态加载数据的HTML网页,如果还是直接从网页上抓取那么将无法获得任何数据. 今天,我们就在这里简单聊一聊如何用python来抓取页面中的JS动态加载的数据. 给出一个网页:豆瓣电影排行榜,其中的所有电影信息都是

  • 浅谈synchronized方法对非synchronized方法的影响

    浅谈synchronized方法对非synchronized方法的影响

    StringBuilder是线程不安全的类. StringBuffer是线程安全的,因为它里面的方法加了synchronized. 今天写了一段代码测试了一下:用循环开启10个线程,调用StringBuffer(StringBuilder)的append追加1 到 10 . 结果预期一样:线程不安全的StringBuilder会漏掉一些数字, public static void main(String[] args) throws InterruptedException { StringBu

随机推荐