首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些:

  1. 网页可见区域宽: document.body.clientWidth
  2. 网页可见区域高: document.body.clientHeight
  3. 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
  4. 网页可见区域高: document.body.offsetHeight (包括边线的高)
  5. 网页正文全文宽: document.body.scrollWidth
  6. 网页正文全文高: document.body.scrollHeight
  7. 网页被卷去的高: document.body.scrollTop
  8. 网页被卷去的左: document.body.scrollLeft
  9. 网页正文部分上: window.screenTop
  10. 网页正文部分左: window.screenLeft
  11. 屏幕分辨率的高: window.screen.height
  12. 屏幕分辨率的宽: window.screen.width
  13. 屏幕可用工作区高度: window.screen.availHeight
  14. 屏幕可用工作区宽度: window.screen.availWidth

接着我们结合实例来实际说明一下:

有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

如下图:

(我们设置了这个div id为“bg”的高度为100%,但下拉条内容拉下去的时候,还是会发现这个背景高度只是父页面的100%,里面子容器的内容都没有被这个黑色背景覆盖到。)

所以在这种时候我们就要开始考虑给这个“bg”设置对应的动态高度。

在js中的初始化方法里写如下代码:

  1. //定义id为bg的高度随内容而变化
  2. var winHeight=0;
  3. winHeight=document.body.scrollHeight;
  4. document.getElementById("bg").style.height=winHeight+"px";
  5.  
  6. }

然后我们再来看效果:

好了,这样整个页面都可以被渲染到了。

js动态获取浏览器或页面等容器的宽高的更多相关文章

  1. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  2. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

  3. JS动态获取浏览器宽度和高度

    $(window).resize(function() { var width = $(this).width(); var height = $(this).height(); });

  4. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  5. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  6. js自定义获取浏览器宽高

    /** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...

  7. js动态获取子复选项并设计全选及提交

    在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加 ...

  8. js判断获取浏览器关闭状态

    如题,js获取浏览器关闭状态,可实现判断选择是否关闭. <html> <head> <title> </title> </head> < ...

  9. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

随机推荐

  1. java线程面试手写题

    1.设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1.写出程序. public class Question1 { private int j = 0; /** * @param ...

  2. 如何查看服务器CPU核心数和线程数

    知道服务器CPU型号,那么我们如何在服务器里面查看服务器CPU核心数和线程数呢? 步骤: 先用鼠标右键点击屏幕最下方的任务栏空白处.会弹出一个菜单. 在菜单中用鼠标左键点选“启动任务管理器”. 点击任 ...

  3. Python实例---基于页面的后台管理[简单版]

    后台管理菜单 + 母板[css/content/js] 向后台提交数据[2种]:       1.  模态对话框(数据少操作,且Js复杂):        form表单 :优点:简单,前端提交后后台处 ...

  4. Java实例---简单的个人管理系统

    代码分析 FileOperate.java package com.ftl.testperson; import java.io.File ; import java.io.FileInputStre ...

  5. [DBSDFZOJ 多校联训] 就

    就 背景描述 一排 N 个数, 第 i 个数是 Ai , 你要找出 K 个不相邻的数, 使得他们的和最大. 请求出这个最大和. 输入格式 第一行两个整数 N 和 K. 接下来一行 N 个整数, 第 i ...

  6. C#预定义类型、引用类型

    一.预定义的值类型 一个字节(1Byte)=8位(8Bit) BitArarry类可以管理位Bit. 1.整型 所有的整形变量都能用十进制或十六进制表示:long a=0x12AB 对一个整形值如未指 ...

  7. 理解单链表的反转(java实现)

    要求很简单,输入一个链表,反转链表后,输出新链表的表头.   反转链表是有2种方法(递归法,遍历法)实现的,面试官最爱考察的算法无非是斐波那契数列和单链表反转,递归方法实现链表反转比较优雅,但是对于不 ...

  8. LoadRunner 测试Socket接口函数说明

    lrs_save_param_ex是lrs_save_param的扩展函数,包含了lrs_save_param的基本功能.其函数语法结构如下: int lrs_save_param_ex ( char ...

  9. BZOJ1821:[JSOI2010]部落划分(并查集,二分)

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...

  10. size和len

    size函数只能用于计算array,不能用于计算list,返回的是数组的元素个数 len函数既可以计算array,也可以计算list >>> a = np.array([1,2]) ...