javascript - 当 Div 包含 float 内容时在 Javascript 中获取 Div 容器高度(没有 jQuery)

Question

我正在尝试获取最初未设置高度但包含 float 元素的 div 容器的高度。 offsetHeight 属性不断出现 0。如果我将包含的 div 的溢出属性设置为 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 方法来强制您的容器元素“扩展”并实际包装其所有子 float 元素。

#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: "";显示:表格；明确:两者； } 并将 clearfix 类添加到您想要自清除的元素，以将 CSS 保持在最低限度。