Avatar of mychel_normandeau
mychel_normandeauFlag for Canada asked on

JavaScript : What's wrong with my code... OffsetHeight retrieved is bad

Go to:
www.wolfcast dot com/about.php

I dynamically add a onLoad page event that resize the "Chronology" box to fit the height of the "History" box. (I also add a custom event that do the same when the user change the text size)

My problem is that I can't find a way to set the chronology box height to the same as the history box. Currently I get the height with clientHeight and set it with style.height (in px). Currently it gives me a 16px gap...

How can I set the 2 boxes with the same height (without setting a fixed height to both - only one - the smallest).


Avatar of undefined
Last Comment

8/22/2022 - Mon

I can't explain the remaining gap, but found a way to make the divs equal. Just set the largest also to its own height :

(replace the FitToTallest() function in wolfcast_resize.js)
function FitToTallest(elements)
    if (tallestElement == null)
        tallestElement = GetTallestElement(elements);
    if (tallestElement != null)
        for (var i = 0; i < elements.length; i++)
            var currElement = document.getElementById(elements[i]);
            if (currElement && currElement.id != tallestElement.id) {
                currElement.style.height = tallestElement.clientHeight + 'px';
        tallestElement.style.height = tallestElement.clientHeight + 'px';
        return true;
    return false;

Open in new window


I can't use this solution since I need the tallest one to have a variable height (no fixed height) or otherwise the boxes won't resize if the user use the browser text size options...

But the tallest one can have a variable height.
The script finds that one. Sets the other divs to that height.
Unfortunately it gets a little larger for reasons we don't know (yet).
And after that it makes itself (the largest div) to that same height (a little larger that it was).

I know it's not perfect.. :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy

It's not suitable because with your solution, each time the user changes the font size with their browser 16px is added to the height...

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question