zoukankan      html  css  js  c++  java
  • offsetHeight、scrollHeight、clientHeight、height

    对这几项进行彻底研究。

    第一步:纯净div,没有margin,padding,border,height设置为200px。

    添加滚动条,overflow:scroll,结果div的高度被压缩,因为被滚动条占用17px(滚动条的高度为17px)。

    加入滚动条前:

    • scrollHeight=200px
    • offsetHeight=200px

    加入滚动条后:

    • scrollHeight=183px=(内容高度200px-滚动条17px)  (说明scrollHeight已经不包括滚动条的高度
    • offsetHeight=200px

    第二步:将div加上20px的padding

    加上padding之后:

    • scrollHeight=(内容高度200px+上下padding40px-滚动条17px)=223px(说明scrollheight包括padding,不包括下滚动条的高度。
      结论:滚动高度可以理解为和滚动条平行的那段距离,显然,border和margin都不和滚动条平行,所以,border和margin都不算在滚动高度内
    • offsetHeight=200px+上下padding=240px  (说明offsetHeight就是整个div的最终高度)
      结论:offsetHeight直观理解是眼睛能看的到的整个高度,包括(如果有的话):滚动条+内容+padding+border,margin不可见,所以不算在内

    内容超长的情形:

    • scrollHeight的值就为内容展平的高度+padding,可以想像成内容展平的高度。

    结论:

    • scrollHeight=内容高度 + (上下)padding - 底部滚动条17px(如果有)(可变)
    • offsetHeight=整个可见高度(固定)
    • clientHeight=可见内容高度+(上下)padding(固定)

     

  • 相关阅读:
    RSA私钥加密研究
    贪吃蛇 WPF
    随手写 --- 贪吃蛇
    canvas总结:线段宽度与像素边界
    canvas总结:元素大小与绘图表面大小
    【原】YUI Test自动化测试实例详解
    【译】Optimize for mobile-移动端优化
    【原】从一个bug浅谈YUI3组件的资源加载
    【译】Optimize caching-缓存优化
    【原】YUI3:js加载过程及时序问题
  • 原文地址:https://www.cnblogs.com/tinaluo/p/7307079.html
Copyright © 2011-2022 走看看