Question

我正在尝试获取最初没有设置高度的div容器的高度并包含浮动元素。 offsetHeight属性不断出现0。如果我将包含div的overflow属性设置为hidden，我就能获得高度。有没有比这更好的方法？

我在jsFiddle中有一个例子 - http://jsfiddle.net/6RQMb/。这是我第一次使用jsFiddle进行测试，所以如果我做错了，请告诉我......

如果我用jsFiddle弄乱了一些东西（因为stackoverflow要求它），这里是示例信息：

HTML

<div id="container"><p>Some text that gives this element height</p></div>

CSS

p {float:left;}

/* uncomment next line and it works, without it the alert comes back with 0

#container {overflow:hidden;}

*/

JAVASCRIPT

alert( document.getElementById('container').offsetHeight );

Answer 1

您可以使用clearfix方法强制容器元素“展开”并实际包装其所有子浮动元素。

#containerDiv:after { content:"."; clear:both; visibility:hidden; display:block; height:0; position:relative; }

此技术要求浏览器支持CSS生成的内容。这种技术的变体可用于支持低至IE6的浏览器。 Chris Coyier explains here

这里有效：http://jsfiddle.net/remibreton/2vQVJ/1/

编辑：如果您只对支持IE8 +感兴趣，可以使用更清晰的.clearfix:after { content: ""; display: table; clear: both; }并将clearfix类添加到您想要自我清除的元素中，以将CSS保持在最低限度

Answer 2

因为子元素p是浮动的，所以容器除法没有任何图形高度。

以下是MSDN的摘录，其中讨论了offsetHeight将返回的内容。 http://msdn.microsoft.com/en-us/library/ms534199%28VS.85%29.aspx

要符合层叠样式表，1级（CSS1）框模型，Microsoft Internet Explorer 6及更高版本在文档中使用！DOCTYPE声明来启用符合标准的模式时，会以不同方式计算对象的高度。此差异可能会影响offsetHeight属性的值。打开符合标准的模式时，height属性指定围绕对象内容的边界框的顶部和底部边缘之间的距离。如果未打开符合标准的模式，并且使用早期版本的Windows Internet Explorer，则height属性还包括围绕对象边界框的边框和填充带。

您必须使用任何元素清除技术才能使图形高度为containerDiv。清除父元素有很多种方法。您最好决定哪一个最适合您。我通常使用overflow: hidden。

此处详细解释了Clear属性。 https://developer.mozilla.org/en-US/docs/CSS/clear

当Div包含浮动内容（没有jQuery）时，在Javascript中获取Div容器高度

2 个答案: