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

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

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

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

$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin

$(window).width(); //浏览器当前窗口可视区域宽度

$(document).width();//浏览器当前窗口文档对象宽度

$(document.body).width();//浏览器当前窗口文档body的高度

$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin

用一句话理解就是:当网页滚动条拉到最低端时,$(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像素偏差

 代码如下 复制代码

// 获取页面的高度、宽度

function getPageSize() {

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = window.innerWidth + window.scrollMaxX;

yScroll = window.innerHeight + window.scrollMaxY;

} else {

if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

}

var windowWidth, windowHeight;//www.111cn.net

if (self.innerHeight) { // all except Explorer

if (document.documentElement.clientWidth) {

windowWidth = document.documentElement.clientWidth;

} else {

windowWidth = self.innerWidth;

}

windowHeight = self.innerHeight;

} else {

if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else {

if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

}

}

// for small pages with total height less then height of the viewport

if (yScroll < windowHeight) {

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

// for small pages with total width less then width of the viewport

if (xScroll < windowWidth) {

pageWidth = xScroll;

} else {

pageWidth = windowWidth;

}

arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

return arrayPageSize;

}

// 滚动条

document.body.scrollTop;

$(document).scrollTop();

 

jquery获取文档高度和窗口高度的例子的更多相关文章

  1. jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  2. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  3. js和jquery获取文档对象以及滚动条位置

    <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; to ...

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

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

  5. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  6. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  7. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  8. SharePoint 2013 通过审计获取文档下载次数

    1.创建一个文档库,进入库设置,找到”Information management policy settings”,点进去,如下图: 2.分别设置”Document”.”Folder”两个,如下图: ...

  9. vc多文档应用程序窗口初始化,关闭子框架,标题,动态切换

    vc多文档应用程序窗口初始化    http://hi.baidu.com/laocui172/item/8d17a00b252154e1ff240dae      VC 多文档视图: 关闭所有子框架 ...

随机推荐

  1. java中的定时器

    所有类型的 Java 应用程序一般都需要计划重复执行的任务.企业应用程序需要计划每日的日志或者晚间批处理过程.一个 J2SE或者 J2ME 日历应用程序需要根据用户的约定计划闹铃时间.不过,标准的调度 ...

  2. Myeclipse 10.x 安装Aptana3.2 插件

    安装步骤: 1.下载aptana3.2 Eclipse Plugin插件. 下载地址:http://update1.aptana.org/studio/3.2/024747/index.html 2. ...

  3. CentOS6.5安装图形界面

    转载自http://www.cnblogs.com/zydev/p/5128788.html 一.使用网络安装(如果网络比较快,这个方法简单) yum groupinstall "Deskt ...

  4. ThinkPad指纹验证在win7无法使用的解决方法

    原先本本装window7 64bit 专业版(正版),但用着用着觉得 很不爽 ,反应特慢.所以决定对本本来次大换血,换成windows server 2008 R2.最后在装指纹验证的时候,使用超级管 ...

  5. Windows命令大全

    From:http://technet.microsoft.com/zh-cn/library/cc731728(v=ws.10).aspx Adprep Append Arp Assoc At At ...

  6. 【转】GCC使用简介

    Linux系统下的gcc(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作品之一.gcc是可以在多种硬体平台上编译出可执行程序的超级编译器,其执行效率与一 ...

  7. stm32上的Lava虚拟机开发进度汇报(4)

    这段时间颓废了,基本上没在弄这个东西. 主要是因为前段时间把代码基本上写完之后,但是问题一大堆,除了自己写的几个简单测试程序,其他现成的东西没有一个是能正常运行的,很是郁闷,也不知道哪里有错误,所以放 ...

  8. stm32上的Lava虚拟机开发进度汇报(3)

    感觉遇到一个瓶颈了,这几天都没有什么进度. 前几天把函数和一些最基本的伪指令实现了一下,能跑一点仅使用了绘图函数的lav,但是函数调用的问题一直没解决. 后来发现是粗心漏写了个++,解决了函数调用的问 ...

  9. Android播播放完SD卡指定文件夹音乐之后,自动播放下一首

    最近做一个项目,需要连续播放音乐,播放完一首歌之后,自动播放完下一首歌.不要重复播放. 代码如下: package com.example.asyncplayer_ex; import java.io ...

  10. 教你使用Android SDK布局优化工具layoutopt

    创建好看的Android布局是个不小的挑战,当你花了数小时调整好它们适应多种设备后,你通常不想再重新调整,但笨重的嵌套布局效率往往非常低下,幸运的是,在Android SDK中有一个工具可以帮助你优化 ...