Question

Back story: I have an SVG canvas with some polylines on it. I also have some HTML <span> and <textarea> elements that need to be positioned precisely in relation to those polylines.

I started by putting the HTML elements in the SVG in <foreignElement> tags, but I had a problem there because IE doesn’t see them at all and Firefox doesn’t see the <textarea>s. So I took them out of the SVG and now every browser sees them.

So far so good. Now the only way I know to make sure they position correctly with the polylines is to give both the HTML elements and the SVG canvas absolute positions with CSS.

Here’s my problem. Above all these elements is a header div. I want the whole SVG business to sit at a reasonable distance below the header. Say 15px. But since the SVG is absolutely positioned, I need to know the height of that header div to get the SVG and related HTML elements into the right place.

I’ve tried jQuery’s .height() method and some related methods. The problem with all of them is that Firefox and Chrome give two different results. I know this doesn’t reflect a real pixel height difference between the two, because I can see visually that the header is slightly taller in FF, yet FF gives a smaller height reading.

How can I get a browser-consistent height reading for my header div? Or at least one that I can use to absolutely position other elements at the same distance below it in every browser.

Answer 1

You could try with this function

function getHeight() {
    return Math.min(
            Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
            Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.min(document.body.clientHeight, document.documentElement.clientHeight)
        );

}

or simply with document.documentElement.clientHeight, which usually does the trick for me in all the browsers I use for testing (Chrome, Firefox, Safari and Opera)

[edit] The function above returns the width and height of the body, in order to use it for any div, use this one

function getHeight(div) {
        return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);  
    }

You can use it like this

var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));

[edit2]Keep in mind that the divs might actually have a different size depending on the browser.

Let’s say this is google chrome and the green bar at top is the navigation bar, with a height of 75px. You have it at 100%, filling up your screen, who has 1000px height, and you place an 100 pixels div to the top and also stick an 100px div to the bottom of the screen (with blue). The purple div between them will have an 725px height.

And this below is firefox. It’s placed on the same 1000px screen, also at 100%, but its navigation bar has 100px height. With the same 100px blue divs to the top and the bottom, the purple div will have a height of 700px here, different from chrome.

Of course, this is a very, very simple example and I doubt this is your case. But you might have a similar problem with div placements and it’s something you should try to check.