jquery获取文档高度和窗口高度,$(document).height()、$(window).height()

$(document).height():整个网页的文档高度

$(window).height():浏览器可视窗口的高度

$(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。

不建议使用$("html").height()、$("body").height()这样的高度。

原因:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。

$(window).height()值有问题,返回的不是浏览器窗口的高度?

原因:网页没有加上<!DOCTYPE>声明。

懒人建站整理js获取页面高度和窗口高度

实际应用:设置内容区域合适的高度

//设置内容区域合适高度
    var docH = $(document).height(),
        winH = $(window).height(),
        headerH = $(".header").outerHeight();
        footerH = $(".footer").outerHeight();
    if(docH<=winH+4){
        $("div.container").height(winH-headerH-footerH-50);
    }

注:winH+4 因为IE8下只有4像素偏差

jquery常见获取高度的更多相关文章

  1. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  2. jquery获取高度错误(可以获取到宽度,但获取不到高度),及解决办法

    <div class="foo"> <div style="display: none;"> 3333333 </div> ...

  3. [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

    在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...

  4. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  5. jQuery无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

    用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢工了. 用Chrome自带的开发工具一查,发现罢工 ...

  6. jquery里面获取div区块的宽度与高度

    https://blog.csdn.net/ll641058431/article/details/52768825 获取宽度 $('div').width();     获取:区块的本身宽度 $(' ...

  7. jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...

  8. 转:jQuery 常见操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  9. JQuery元素获取

    前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...

随机推荐

  1. Python之Web框架

    Python之Web框架: 一.  Web框架的本质: 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env pyth ...

  2. html JS 打开本地程序及文件

    在网页打开本地应用程序示例: 一.在本地注册表自定义协议:以自定义调用Viso为例 1.在HKEY_CLASSES_ROOT下添加项ZVISIO. 2.修改ZVISIO项下的"(默认)&qu ...

  3. SQL 检查 是否存在 表 临时表

    1.检查临时表是否存在 已有临时表#temp2 if exists(select * from tempdb..sysobjects where id =object_id('tempdb..#tem ...

  4. 【笔记】MySQL查询排名

    select a.name, a.total_score,@rank:=@rank+1 as rank from (                  select u.name,uti.total_ ...

  5. 记一次proc_open没有开启心得感悟

    引言: 今天在部署服务器的时候,使用composer来安装依赖.遇到了 The Process class relies on proc_open, which is not available on ...

  6. AVL树的平衡算法(JAVA实现)

      1.概念: AVL树本质上还是一个二叉搜索树,不过比二叉搜索树多了一个平衡条件:每个节点的左右子树的高度差不大于1. 二叉树的应用是为了弥补链表的查询效率问题,但是极端情况下,二叉搜索树会无限接近 ...

  7. eclipse的package, folder, source folder 异同以及相互转化

    1 相同点:都是文件夹; 不同点: 我们用面对对象思维来看; 首先说folder, 三者的父类(object),就是普通的文件夹,它和我们window下面使用的文件夹没有任何区别; source fo ...

  8. 安装Hive(独立模式 使用mysql连接)

    安装Hive(独立模式 使用mysql连接) 1.默认安装了java+hadoop 2.下载对应hadoop版本的安装包 3.解压安装包 tar zxvf apache-hive-1.2.1-bin. ...

  9. OX中修改文件名

    右击文件,显示简介,名称与扩展名

  10. cookies插件,记住cookies

    今天同事交给了我一个记住cookies插件,首先先去网上下载一个jquery.cookie.js文件文件下载 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...