Geek Answers Handbook

Getting the height of a div container in javascript when a div contains floating content (no jQuery)

I am trying to get the height of a div container that does not have the originally set height and contains a floating element. The offsetHeight property continues to grow 0 . I can get the height if I set the div overflow property to hidden . Is there a better way than this?

I have an example in jsFiddle - http://jsfiddle.net/6RQMb/ . This is my first time using jsFiddle for testing, so let me know if I did something wrong ...

In case I messed up something using jsFiddle (and because he requested it for stackoverflow), here is an example of information:

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
source share
2 answers

You can use the clearfix method to force your container element to expand and actually wrap all its child floating elements.

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

This method requires the browser to support CSS content. There are variations on this method that you can use to support browsers with IE6. Chris Coyer explains here .

Here it is in action: http://jsfiddle.net/remibreton/2vQVJ/1/

EDIT: If you are only interested in IE8 + support, you can use a much cleaner .clearfix:after { content: ""; display: table; clear: both; } .clearfix:after { content: ""; display: table; clear: both; } .clearfix:after { content: ""; display: table; clear: both; } and add the clearfix class to the element you want to clear in order to minimize this CSS.

+2
source

Since the child of p floats, the division of the container has no graphic height.

Here is an excerpt from MSDN that talks about returning offsetHeight . http://msdn.microsoft.com/en-us/library/ms534199%28VS.85%29.aspx

To match cascading style sheets with a Level 1 model (CSS1), Microsoft Internet Explorer 6 and later calculates the height of objects differently when you use the declaration! DOCTYPE in its document to enable standard mode. This difference may affect the value of the offsetHeight property. When standard compliant mode is enabled, the height property determines the distance between the upper and lower edges of the bounding box that surrounds the contents of the object. When standards-compliant mode is not enabled with earlier versions of Windows Internet Explorer, the height property also includes border and padding ribbons that surround the object’s bounding box.

You should use any element cleaning method to have the graphic height of containerDiv . There are many ways to clean a parent. You just need to decide which one suits you best. I usually use overflow: hidden .

The explicit property is explained in detail here. https://developer.mozilla.org/en-US/docs/CSS/clear

0
source

More articles:


All Articles