最近在做一个自适应高度的加载时的瀑布效果,使用加载完毕后为其一个A容器设置style的高度的方式完成(原高度为0且超出部分裁剪),使用offsetHeight获取其子元素高度(所有子元素高度均相等),完成后,A容器底部总是比预期长了一点。

查了一下资料,发现offsetHeight得到的是元素的整数高度,而我的子元素高度为浮点数且小数第一位大于4,所以我就去看了看子元素各自的高度,发现设置了font-size且未设置line-htight的元素(我设置的大小为14px),其高度会变成x.5,设置line-height为1.5em之后就没问题了(当然前提是font-size为偶数)。

关于元素的offsetHeight、line-htight的更多相关文章

  1. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  2. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  3. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  4. offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight

    w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...

  5. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  6. Bootstrap3 排版-内联文本元素

    标记文本 突出显示的文本由于其相关性在另一个上下文中,使用<mark>标记. You can use the mark tag to highlight text. You can use ...

  7. clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...

  8. scrollTop、offsetHeight和offsetTop等属性用法详解--转转转

    scrollTop.offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼 ...

  9. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

随机推荐

  1. 服务注册与发现---spring cloud

    Eureka基本架构 Register Service :服务注册中心,它是一个 Eureka Server ,提供服务注册和发现的功能. Provider Service :服务提供者,它是 Eur ...

  2. XML解析方式有哪些?

    1.DOM:要求解析器吧整个XML文档装载到内存,并解析成一个Document对象. (1).优点:元素与元素之间保留结构关系,故可以进行增删改查操作. (2).缺点:XML文档过大,可能出现内存溢出 ...

  3. Jenkins应用

    转自 https://www.cnblogs.com/syw20170419/category/1239520.html Jenkins+Git+Python 进行持续集成接口测试 https://w ...

  4. 微信小程序截取字符串

    我这里用的 str.substring(star,end)第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串 ...

  5. NX二次开发-BlockUI的Tree树控件

    关于BlockUI的Tree树控件只要研究UGOPEN里西门子官方的那个例子在结合去查NXOPEN的帮助基本就可以了.[不过我是看唐工的视频学会的,没办法自己领悟性不太强] //=========== ...

  6. 天照(amaterasu)

    天照(amaterasu) 有些时候,出题人真的不想写背景. 总而言之,天照现在有一个长度为 $ N $ 序列,她有 $ M $ 次询问,对于第 $ i $ 次询问 $ l_i,r_i,x_i $ 你 ...

  7. 在ag-grid表格上实现类似Excel中的按下enter键自动跳转到下一行对应的输入框功能,Angular4开发

    最近的项目使用ag-grid在Angular中处理表格,收到个需求是要能够同时修改大量的数据,按下Enter键的时候,光标得自动跳到下一行的对应列上. 方法一:用ag-grid自带的 enterMov ...

  8. ProcessFun

    #pragma once #ifndef __PROCESSFUN_H__ #define __PROCESSFUN_H__ #include <iostream> #include &l ...

  9. 10. Python面向对象

    Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.如果接触过java语言同学应该都知道,Java面向对象三大特征是:封装.继承.多态.Pytho ...

  10. 编码(RZ NRZ NRZI)

    Frm: https://jingyan.baidu.com/album/39810a23addccbb637fda66a.html?picindex=1 RZ 编码(Return-to-zero C ...