Javascript DOM offsetHeight issue on small screens

Question

I have a simple code to set the height of one column, id="colLeft" to the height of another column, id="colRight", with no padding or borders:

<script type="text/javascript">
    var colLeft = document.getElementById("colLeft");
    var colRight = document.getElementById("colRight");
    colLeft.style.height = colRight.offsetHeight + "px";
</script>

This code works fine on desktop and iPad, but on my android phone the results are rather unpredictable. Sometimes colLeft is much longer, sometimes colRight, and sometimes it works the way it should. I have tried it on two browsers with the same results.

I have also tried it inside window.onload=function(){...} which gave slightly less variance in the results, but is still not perfect.

Thanks for any help.

Have you tried jQuery? You can use `$(document).ready(function() { ... })` instead of `window.onload` You can also use `$(window).length()` instead of `offsetHeight` This may be an acceptable solution to your problem. — ModernDesigner, Jan 24 '13 at 03:36
I was hoping to solve this without the use of a library but I will consider it. — chuckieDub, Jan 24 '13 at 03:46
I find myself in that bind sometimes... Sometimes I wish layout engines would just support jQuery/Modernizr/Dojo/RoR automatically. Of course, for obvious reasons, this would never happen. — ModernDesigner, Jan 24 '13 at 03:47
Do you get inconsistent results when loading the same exact page over and over, or do things go crazy depending on the content of the columns? — Warren R., Jan 24 '13 at 04:09
inconsistent on same page, but only when the content is larger than the viewable area — chuckieDub, Jan 24 '13 at 04:45

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You can read a bit about offsetHeight here. The important thing to note is that if the content is larger than the viewable area the browser might do funny things with non-scrolling elements. Because this is a phone browser, I am guessing that the issue is that it is miscalculating the column height because it doesn't deal with scrolling elements correctly.

How do you set the height of the first column? If it has a valid height set in the style sheet you could easily do something like this:

colLeft.style.height = colRight.style.height;

If that doesn't work, you may need to set the column height based on the browser window size with something like:

    colLeft.style.height = colRight.style.height = (window.innerHeight - 10) + "px";

Or something similar.

Javascript DOM offsetHeight issue on small screens

1 Answers1