【JS】获取网页可用区域高度

已于 2023-07-21 17:43:03 修改
阅读量492 收藏
点赞数 1
分类专栏： JavaScript 文章标签： css html5 js javascript
于 2020-08-16 14:05:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CCC0203/article/details/107973548
版权
本文深入探讨了document.documentElement.clientHeight属性的使用方法，这是获取浏览器中网页实际可用高度的关键代码，排除了工具栏等非内容区域的影响。该属性对于前端布局和响应式设计至关重要，确保网页元素在不同设备和屏幕尺寸下能够正确显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.documentElement.clientHeight

也就是浏览器内除去工具栏等，网页本身可用的高度。

相关具体内容在红宝书第 11 章有。

检测页面可用宽度、高度
12-20
检测html页面显示的宽度/高度、可用宽度/高度，方便界面设计人员更合理的利用界面资源。
js 获取 屏幕 可用高度...
weixin_30340819的博客
10-13 523
document.documentElement.clientWidth 此方法适用于手机... document.documentElement.clientHeight (浏览器(手机或电脑)可用高度.) 转载于:https://www.cnblogs.com/whm-blog/p/9783759.html...
javascript获取浏览器可用区域大小[z]
liudaoru - 悟
11-09 383
From: http://www.cnitblog.com/yemoo/archive/2007/06/06/28107.html 用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。 本文所说的“浏览器窗口中文档（下面简称“视口”）可用尺寸”指浏览器中文档显示区域的...
JS中获取各种高度、宽度
rj2017211811的博客
02-01 305
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽： doc...
js获取浏览器的高度
zhangjing1019的博客
09-22 579
if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取浏览器窗口高度
js获取网页可见区域、正文以及屏幕分辨率的高度
10-25
标题“js获取网页可见区域、正文以及屏幕分辨率的高度”所涵盖的知识点主要集中在如何使用JavaScript来测量网页上的不同区域的高度。在网站开发和维护过程中，对页面尺寸的精准测量对于页面布局和响应式设计至关重要...
js获取网页高度(详细整理)
10-27
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
js 获取浏览器高度和宽度值(多浏览器)
10-29
* `document.body.offsetHeight`: 获取网页可见区域的高度（包括边线的高）。 * `document.body.scrollWidth`: 获取网页正文全文的宽度。 * `document.body.scrollHeight`: 获取网页正文全文的高度。 * `window....
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
10-25
在JavaScript中，获取网页、浏览器和屏幕的高度与宽度是常见的需求，这主要涉及到网页布局、动态效果以及响应式设计。以下是一些关键方法的详细解释： 1. **网页可见区域宽高** - `document.body.clientWidth`：...
js获取浏览器可用区域的高度
liu5047853522的专栏
08-19 1224
Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
网页各种高度
ZW_ei的博客
01-29 1012
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽： docu
js中获取各种高度和宽度的总结
UUID、
12-08 900
Js中获取各种高度和宽度的总结
获取网页内容区域各种高/宽汇总
weixin_33978016的博客
12-16 148
js获取屏幕高度和宽度 window.onload=function(){ //获取屏幕高度document.documentElement.clientHeight console.log(document.documentElement.clientHeight); //获取屏幕宽度document.documentElem...
js获取浏览器当前窗口的高度长度
weixin_30782293的博客
08-28 177
js获取浏览器可见区域(不包括标题栏、地址栏、收藏夹栏状态栏等额外区域，仅为页面呈现区域)的高度和宽度宽度：document.documentElement.clientWidth高度：document.documentElement.clientHeight文档类型：XHTML1.0浏览器：ALL 转载于:https://www.cnblogs.com/kingkongv/p/jav...
JS获取各种屏幕的宽度和高度
m0_48524046的博客
12-09 7716
JS获取各种屏幕的宽度和高度
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
electron 一些问题
两个人的幸福online
10-20 1180
1，获取屏幕的宽和高用于设置定位 可以，注意需要在 加载完成后设置可以在创建窗口时候获取。2，cmd 输出中文乱码 ，这个是cmd 没有使用utf-8导致，修改命令就可以了。
屏幕宽高的取值
woaipaiqiu的专栏
04-02 919
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth(包括边线的宽) 网页可见区域高：document.body.offsetHeight(包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高
JavaScript判断屏幕，浏览器，网页，对象的宽高度
qq_36306659的博客
07-22 631
screeen.height:屏幕分辨率的高 screen.width:屏幕分辨率的宽 前面这两个数表示：屏幕宽高(屏幕像素) ---- 定值 screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下测任务栏的高度） screen.availWidth:屏幕可用宽度（屏幕分辨率的宽度-左右侧任务栏的宽度） 前面这两个数表示：屏幕可用宽高(像素) ---- 定值   ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值