document.getElementById null and/or not working even though it is there and after it's loaded

StackOverflow https://stackoverflow.com/questions/22902440

  •  28-06-2023
  •  | 
  •  

Question

I have a very very small understanding of JavaScript. I'd like to make the two divs equal height based on the height of the taller one (and then expand their container to fit that, but I need to get this part working first). I have tried everything I could possibly find with CSS and the problem only exists in IE7.

First it told me that document.getElementById for content and sidebar (I only tried one at a time) were null. All I could find about that is that it should be after the page is loaded by physically placing it after the content or using window.onload I have tried various combinations of that and then that with nameless functions, named functions, functions triggered by onclick or onmouseover but still nothing happens.

As is, it no longer gives me the null error, but nothing happens and it doesn't give any errors.

Is there something I'm missing here?

<body>
<div id="contentwrapper" role="presentation">
        <div id="content" role="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur, risus vitae ultrices pellentesque, urna massa semper purus, a rutrum neque nunc venenatis tortor. Suspendisse viverra tortor eget nisl elementum scelerisque id id tortor. Vestibulum quis mi non purus gravida tincidunt sed sed elit. Phasellus iaculis commodo erat, pellentesque egestas lectus feugiat non. Maecenas nulla neque, semper vel sem sed, volutpat venenatis ipsum.</p>
</div>

        <div id="sidebar" role="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur, risus vitae ultrices pellentesque, urna massa semper purus, a rutrum neque nunc venenatis tortor.</p>
</div> 
</div>


<script type="text/javascript">
window.onload = function(){
    var contentheight = document.getElementById("content").clientHeight;
    var sidebarheight = document.getElementById("sidebar").clientHeight;


    /*if(contentheight != sidebarheight) {
        if(sidebarheight > contentheight) {
            document.getElementById("content").style.height = sidebarheight;
        }else{*/
            document.getElementById("sidebar").style.height = contentheight;
       /* }
    }
}*/
}
</script>
</body>

(And yes, most of that is commented out because I'm just trying to get it to do something)

Also the CSS in case that has any effect on it:

#contentwrapper {
    width: 500px;
    border: 1px solid black;
    height: 100%;
    background: #DDF;
    position: relative;
}

#content {
    width: 300px;
    display: block;
    background: #FDD;
    display: inline;
    position: absolute;
    left: 0;
}

#sidebar {
    width: 200px;
    display: block;
    background: #DFD;
    display: inline;
    position: absolute;
    right: 0;
}
Was it helpful?

Solution

The clientHeight property is an integer representing the height in pixels. The style attribute cannot make sense of numbers without a connected unit of measure, so you have to add that in.

if(contentheight != sidebarheight) {
    if(sidebarheight > contentheight) {
        document.getElementById("content").style.height = sidebarheight + 'px';
    } else {
        document.getElementById("sidebar").style.height = contentheight + 'px';
    }
}

Unsolicited opinion: (By the way, while getting the height to behave is one of the most common CSS challenges, I am confident you should find a non-js way to achieve what you are looking for, if you try hard enough. If the problem is IE7 — an 8 years old browser that you should perhaps drop support for — consider using a shim to make it behave, for example)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top