当Div包含浮动内容(没有jQuery)时,在Javascript中获取Div容器高度

2019年8月4日 193次阅读

我试图获得一个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 );

最佳答案 您可以使用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：“”;显示：表;明确：两者;并将clearfix类添加到您想要自我清除的元素,以将CSS保持在最低限度.

点赞