client、offset、scroll 理理三种宽高之client

body(div).clientWidth / body(div).clientHeight(无兼容问题)


body.client-1


body.client-2

出现下拉滚动条（跟在窗口可见没关系，height设置多大就多大）

body.client-3

（跟在窗口可见没关系，height设置多大就多大）

div.client-1

没滚动条时：width+padding*2 （跟在窗口可见没关系，height/width设置多大就多大）

div.client-2

出现滚动条时：width+padding*2-滚动条（跟在窗口可见没关系，height/width设置多大就多大）


div.clientLeft/clientTop
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1赞 92
  • JS 各种宽高的理解
    Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 6,720评论 0赞 5
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,673评论 1赞 41
  • 你迷茫，是因为你底气不足
    杨绛说：“迷茫是因为你读的书太少却想的太多”。 最近赶上毕业季，我的实习生面临着转正，跟我的实习生进行了一次深入的...
    Jewel_Z阅读 3,764评论 0赞 3
  • 学习力践行day40
    〔春暖花开〕20170424 周一 学习力践行day40 自省 带娃需要脚踏实地 洋洋感冒咳嗽+妈妈咽炎，践行基本...
    Sophie2liu阅读 1,150评论 0赞 0