【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight

最新推荐文章于 2023-08-05 16:23:20 发布

VIP文章 JohnKeatinghhh

最新推荐文章于 2023-08-05 16:23:20 发布

阅读量678

点赞数

分类专栏： HTML/CSS学习笔记文章标签： html js

本文链接：https://blog.csdn.net/weixin_41604040/article/details/110480766

版权

【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight

测试
结果讨论

参考博客：
https://blog.csdn.net/qq_35430000/article/details/80277587
https://www.cnblogs.com/chuaWeb/p/html_css_1.html

以下测试和结论均基于Chrome浏览器 86.0.4240.198 (正式版本) (x86_64)
首先从字面意思上来看，

clientHeight 的意思是可见高度（包括padding，但不包括border、水平滚动条、margin的元素的高度），inline元素的clientHeight 为 0。
offseHeight 的意思是可见高度（包括padding、border、水平滚动条，但不包括margin的元素的高度）
scrollHeight 的意思是滚动部分的全部高度（包括可见高度和被隐藏高度）

测试

下面用一个简单的例子测试一下（基于Chrome浏览器），读者可以自己运行试一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
    
      margin: 0;
      padding:0;
    }
    body{
    
      margin: 20px auto;
    }
    #absolute{
    
      position: absolute;
      margin-left:

最低0.47元/天解锁文章

JohnKeatinghhh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight

【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight测试结果讨论参考博客：https://blog.csdn.net/qq_35430000/article/details/80277587https://www.cnblogs.com/chuaWeb/p/html_css_1.html以下测试和结论均基于Chrome浏览器 86.0.4240.198 (
复制链接

扫一扫