首先说一下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. No enum constant org.apache.ibatis.type.JdbcType.Integer

    同事今天在用mybatis查询时候,报了上面这个问题.上网查了下,原来是mybatis封装类型的问题.原因是在resultMap中jdbcType写为了Integer,但是在MyBatis中没有这个数 ...

  2. ProxySQL读写分离

    我们首先看一下自己的环境: MHA已经搭建: master: slave: slave: MHA manager在172.16.16.34,配置文件如下: [root@localhost bin]# ...

  3. Excel录入中实现单元格多选项自动下拉

    当我们在Excel表格中需要输入大量的重复数据时,往往利用数据的有效性来制作一个下拉菜单以提高重复数据的输入速度.但在实际的操作过程中,必须选中需要输入重复数据的单元格并单击该单元格右边的下拉箭头,才 ...

  4. Java学习---JDK的安装和配置

    控制面板\系统和安全\系统 CLASSPATH %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; JAVA_HOME C:\Program Files ...

  5. Exchange Server 2007 多名称证书配置

    Exchange Server 2007上配置多名称证书,有两种方式,一种是通过Exchange Management Shell利用命令行工具进行创建:另一种是通过证书管理器控制台进行创建.本文将介 ...

  6. 乘风破浪:LeetCode真题_008_String to Integer (atoi)

    乘风破浪:LeetCode真题_008_String to Integer (atoi) 一.前言 将整型转换成字符串,或者将字符串转换成整型,是经常出现的,也是必要的,因此我们需要熟练的掌握,当然也 ...

  7. LINUX下OA搭建

  8. Current urgent plan(3/30)

    1. resume improving 1.1 project from Udacity 1.2 project from class 1.3 find career center's help 1. ...

  9. JAVAWEB之文件的上传下载

    文件上传下载 文件上传: 本篇文章使用的文件上传的例子使用的都是原生技术,servelt+jdbc+fileupload插件,这也是笔者的习惯,当接触到某些从未接触过的东西时,总是喜欢用最原始的东西将 ...

  10. SpringMvc+Spring+MyBatis+Maven

    使用Maven构建项目 1) 创建一个Maven的war工程 2) 在webapp/WEB-INF下创建一个web.xml文件 <?xml version="1.0" enc ...