CODEWITHSUNDEEP
javascripthtmlcss-floatheight
Cameron
Cameron

Reputation:

How can I get the TRUE height of a div?

I'm trying to determine the height of a div. This sounds simple, but is complicated by the fact that it's only descendant contents are floated, so asking for the height/outerHeight (using jQuery)/clientHeight/offsetHeight only returns 0, even though it's clear that on the page, it is rendered certainly with a height. Here is an example of the HTML structure:

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
</div>

The "text-left" and "text-right" elements have "float: left;" and "float: right;" on them, so when I ask for the height of "root", it tells me it's 0. However, of course, when I get the height of the "text-one" and "text-two", it correctly tells me that it's 20 or whatever.

How can I determine the REAL height of the the "root" element? (For example, if "text-one" had a height of 50 and "text-two" had a height of 20, it would know that the true height is 50)

I imagine there's some kind of logic to work out all the descendant elements' heights and calculate if they're floated etc etc and give me a final figure...but I'm not smart enough to work that out.

Thanks in advance.

EDIT: Please note changing the HTML (to include a "clear", for example) is not an option. I need to be able to tell the height of this div as it is.

Upvotes: 2

Views: 3007

Answers (6)

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

Set the overflow of the root element to hidden, then its height will stretch to match the inner elements. Tested with the link you posted in another comment, and it works!

#root {
  background-color: lightgreen; /* for demo purposes */
  overflow: hidden;
}

If using a CSS file is not an option, then you can use your jQuery to set the CSS:

$('#root').css( 'overflow', 'hidden' );
// ...then your height code

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

I deleted an answer because I missed out on what a lot of others has already pointed out: the height is, quite literally, 0, and everything is working. What you need to do to get the height that, in your words, the root div 'seems' to have, is to make that div actually have that height, which can easily be achieved by simply clearing the floats at the end of the div.

<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
   <div style="clear: both;"></div>
</div>

Upvotes: 1

paulb
paulb

Reputation: 784

As partly referenced above the problem here is a css issue, specifically clearing of floated elements. An excellent overview of which can be found at www.positioniseverything.net/easyclearing.html. As you are unable to alter the html mark-up you could take the positioniseverthing solution and apply it by adding a class to the parent of the floated elements with js/jQuery,

$('#root .body').addClass('clearfix');

Now you should be able to access the height with,

$('#root').height();

as mentioned above. Hope that helps

Upvotes: 0

Elzo Valugi
Elzo Valugi

Reputation: 27866

How about a function that reads all inner divs and stores the maximum height value from the two divs?

I dont think is very correct but here is try:

var max_height = 0;
$.each( $('#root div'), function(x, y){
    var yHeight = $(y).height();
    max_height = ( yHeight > max_height) ? yHeight : max_height;
});
console.log(max_height); //should have the height value.

Working Demo

Upvotes: 1

Steve Gilham
Steve Gilham

Reputation: 11277

That's because the height is zero. Try viewing this

<html><head><title>test</title></head><body>

<div id="root" style="border:1px solid red">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one" style="float: left;">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two" style="float: right;">
         <p>Other text</p>
      </div>
   </div>
</div></body>

Header is empty, and body only contains elements floated out of the layout, so it also counts as empty, leaving root bereft of content to hold it open.

Also by the same reasoning, the body element is zero height; which you can verify by adding <body style="border:1px solid blue">

Upvotes: 7

NickFitz
NickFitz

Reputation: 35041

If all #root's children (strictly speaking, descendants) are floated, then it does indeed have a height of zero. Try setting a background colour on it to prove that it occupies no vertical space.

If you get the heights of the two floated elements, then you can take the greater of those:

var height = Math.max(leftHeight, rightHeight);

Upvotes: 3

Related Questions