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. a标签填充父容器

    body>div>a{Join} div{ width:150px; height:35px; } a{ display:block; line-height:35px; height:3 ...

  2. c#反射机制

    一:反射的定义 审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等. Sys ...

  3. lanmp之一 (动静分离)

    一.lanmp--需求篇 1. 准备两台centos 6,其中一台机器跑mysql,另外一台机器跑apache,nginx + php 2. 同时安装apache和nginx,其中nginx启动80端 ...

  4. IIS性能提升

    1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为65535. IIS Manager > ApplicationPools > Advanced Settings Queu ...

  5. MySQL NoInstall 配置

    1.下载 mysql-mysql-5.1.55-win32.zip 2. 解压缩到任何一个目录,最好目录名称不要有空格: 例如:C:\mysql 3. 删除Embedded,include,lib,m ...

  6. gulp如何使用

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  7. iOS-APP提交上架流程(新手必看!2016年3月1日最新版)

    自己的经验总结,有错的话请留言,第一时间更改. 先大概说一下iOSAPP上架的几个步骤(详细步骤见下图): 创建证书请求文件 登录苹果开发者中心生成发布者证书(下载下来要双击一下) 设置APPID(要 ...

  8. C 标准库系列之ctype.h

    ctype.h 主要提供了一些函数用以测试字符或字符处理的功能函数:包括字符判断检测.字符转换: 目前ASCII字符可分为以下一些类型,如:大写.小写.字母.数字.十六进制.空白字符.可打印字符.控制 ...

  9. AndroidStudio导入项目出现Your project path contains non-ASCII characters错误

    Your project path contains non-ASCII characters. This will most likely cause the build to fail on Wi ...

  10. CozyRSS开发记录12-MVVM,绑定RSS源和数据

    CozyRSS开发记录12-MVVM,绑定RSS源和数据 1.引入MvvmLight MVVM最近貌似在前端那块也挺火的.据说,WPF的程序如果不用MVVM,那跟MFC和winform的,也没啥区别. ...