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. Code::Blocks如何支持C++11特性

    为了给同事分享C++11标准,需要一个演示C++11的编程环境.VS2013太大,安装起来不太方便.由于电脑上之前有安装codeblock,于是升级MinGW.去MinGW官网http://www.m ...

  2. fiddler ios 手机抓包

    前言: 环境 :手机ios ip5s .fiddler .360wifi 保证手机和电脑是局域网(同一网络) 1:下载安装fiddler 准备环境 2:配置 fiddler 对应把图勾选上 弹出框 点 ...

  3. Angular2 Http

    1. 使用Http 绝大部分应用程序都会和后台服务打交道,Http是浏览器和服务器之间通讯的主要协议,通过Http调用来访问远程服务器上相应的 Web API. HttpModule 并不是 Angu ...

  4. Android源码阅读 – Zygote

    @Dlive 本文档: 使用的Android源码版本为:Android-4.4.3_r1 kitkat (源码下载: http://source.android.com/source/index.ht ...

  5. tomcat端口被占用问题完美解决方案!

    启动Tomcat服务器报错:Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are alrea ...

  6. POJ 2823 Sliding Window 线段树区间求和问题

    题目链接 线段树区间求和问题,维护一个最大值一个最小值即可,线段树要用C++交才能过. 注意这道题不是求三个数的最大值最小值,是求k个的. 本题数据量较大,不能用N建树,用n建树. 还有一种做法是单调 ...

  7. sh5.while 脚本练习

    脚本编程: 顺序结构 选择结构 if, case 循环结构 for,while,until while循环:适用于循环次数未知的场景 语法: while CONDITION;do statement ...

  8. 获取URL参数值

    function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*) ...

  9. ios 弹出不同的键盘

    iOS 提供了10种键盘类型,在开发中,我们可以根据不同的需求,选择不同的键盘样式,例如,当我们只需要输入手机号码时,可以选择纯数字类型的键盘(NumbersAndPunctuation),当我们需要 ...

  10. SSH ProxyCommand

    简单的说就是SSH层面的代理服务器,实现通过跳板机执行SSH相关命令到目标机器的代理服务.