Question

请参阅此jsFiddle：http://jsfiddle.net/kb2vN/1/

CSS中指定的div'mytext'的高度为100. div中3段的总offsetHeight为3 * 40 = 120.我所追求的这个值（120）。为什么document.getElementById（'mytext'）不返回此值.offsetHeight？父元素的offsetHeight是其子节点的offsetHeights的总和是合乎逻辑的。

如果我没有将CSS中'mytext'div的高度设置为100px，则返回（在我看来）正确的offsetHeight为120。但是在我的情况下，不能在CSS中设置高度。

为什么div的offsetHeight对应于CSS高度，是否存在反映实际div高度的替代高度属性，即使在CSS中指定了高度？

顺便说一句，我使用Chrome作为我的网络浏览器。

修改我意识到我并没有完全清楚这一切的目的。最后我想检查div的实际内容（动态放入div）是否不会导致div占用超过指定的最大高度（通过比较div的offsetHeight与允许的最大高度）。由于我想检查JavaScript是否是这种情况，使用min-height或max-height等属性似乎没有意义。

Answer 1

如果添加边框和其他注释，您将看到为什么这是正确的并且是偏移高度：

http://jsfiddle.net/kb2vN/4/

您会注意到元素#mytext只占用100像素。内容只是溢出它。如果你把元素放在元素之后，你会看到它只在100像素之后开始，并且框中的溢出就在它的顶部。

我认为你真正想要的是min-height：

http://jsfiddle.net/kb2vN/6/

Answer 2

clientWidth和clientHeight属性返回元素的实际大小。

Answer 3

您正在寻找getScrollSize（）。y

http://mootools.net/docs/core/Element/Element.Dimensions

返回表示目标Element大小的Object，包括可滚动区域。以下方法也可用 Window对象。

http://jsfiddle.net/kb2vN/7/

您可以按如下方式进行比较：

if($('mytext').getScrollSize().y != $('mytext').offsetHeight) {

http://jsfiddle.net/kb2vN/11/

Answer 4

如果您暂时将元素的高度设置为auto，那么您可以测试offsetHeight并扩展元素以适合其内容。然后将元素的高度设置回先前的值。

如何确定HTML DOM元素的实际高度，与CSS中指定的高度无关？

4 个答案: