4

我正在尝试获取最初没有设置高度并包含浮动元素的 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 );
4

2 回答 2

2

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

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

该技术要求浏览器支持 CSS 生成的内容。这种技术的变体可用于支持低至 IE6 的浏览器。Chris Coyier 在这里解释。

这是在行动：http: //jsfiddle.net/remibreton/2vQVJ/1/

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

于 2013-01-08T03:37:48.607 回答
0

因为子元素p是浮动的，容器分割没有任何图形高度。

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

当您在文档中使用 !DOCTYPE 声明打开符合标准的模式时，为了符合级联样式表、级别 1 (CSS1) 框模型、Microsoft Internet Explorer 6 和更高版本以不同方式计算对象的高度。这种差异可能会影响 offsetHeight 属性的值。打开标准兼容模式时，height 属性指定围绕对象内容的边界框的顶部和底部边缘之间的距离。如果未打开标准兼容模式，并且使用早期版本的 Windows Internet Explorer，height 属性还包括围绕对象边界框的边框和填充带。

您必须使用任何元素清除技术才能获得containerDiv. 清除父元素的方法有很多种。由您决定哪一个最适合您。我一般用overflow: hidden.

清除属性已在此处详细说明。https://developer.mozilla.org/en-US/docs/CSS/clear

于 2013-01-08T03:46:14.303 回答