zoukankan      html  css  js  c++  java
  • 三张图看懂 clientheight、offsetheight、scrollheight

    clientheight

      clientheigh: 内容的可视区域,不包含border。

      clientheight=padding + height - 横向滚动轴高度。

    The Element.clientHeight read-only property is zero for elements with 
    no CSS or inline layout boxes, otherwise it’s the inner height of an 
    element in pixels, including padding but not the horizontal scrollbar 
    height, border, or margin. 
    这里写图片描述

    offsetheight

      offsetheight:它包含padding、border、横向滚动轴高度。 

      offsetheight=padding+height+border+横向滚动轴高度

    The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer. 
    Typically, an element’s offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar (if present, if rendered). 
    For the document body object, the measurement includes total linear content height instead of the element’s CSS height. Floated elements extending below other linear content are ignored. 
    这里写图片描述

    scrollheight

      scrollheight:可滚动高度,就是将滚动框拉直,不再滚动的高度,这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。

    The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow. 
    The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element’s padding, but not its border or margin. 
    这里写图片描述

  • 相关阅读:
    CopyOnWriteArrayList设计思路与源码分析
    点击页面按钮以excel保存到本地
    上传图片
    关于重复点击的
    去首尾空格还有换行问题//把数字换位大写字母//向后台传输数据
    判断输入的时间与当前的时间(判断时间是今天还是以前的)
    前端的一些小技巧
    git 操作大全
    移动web开发常见问题解决方案
    响应式布局
  • 原文地址:https://www.cnblogs.com/ZengYunChun/p/9323006.html
Copyright © 2011-2022 走看看