CSS Solutions Available
A simple calculation through the DOM
As mentioned, I need my navigation column on the left side of the page to stretch to fit its parent container. Here is the code I’m using:
var myContainerDiv = document.getElementById("leftNavContainer"); var myContainerDivHeight = myContainerDiv.offsetHeight + "px"; var myLeftNavDiv = document.getElementById("leftNavDiv"); myLeftNavDiv.style.height = myContainerDivHeight;
Here’s a rundown of the code (which obviously is stripped of its event handlers and any code that needs to trigger it like a function call): On line 1, I’m putting the container DIV into a variable via the DOM getElementById method. I then use the non-standard, but cross-browser friendly, offsetHeight property to get the height of the container. That’s done on line two, which sets another variable with the value of the height of that element, and appending “px”, to prepare it for insertion as a CSS height value. For example, if my container is 400px high, then the variable myContainerDivHeight would equal the string “400px”. It’s important to note that this value is a string and not a number that we can manipulate mathematically, due to the trailing “px”. And finally, line 3 is almost identical to line 1, only this time I’m putting the left hand div into a variable to set it up for the “400px” value that I’ve already obtained. Thus, on line 4 (I hope you’re still with me!) I set the style.height property of the left hand div to be equal to the height of the child.
Further Development on This Technique
This solution assumes that the left hand DIV (whose size we are adjusting) will start at the top of the parent container (whose size we are obtaining). There could be a situation where the left hand div appears below an image, or below another DIV. In this case, your code would have to take this into consideration, and you could easily subtract the height of that DIV or image from the total height, to ensure that your left hand DIV doesn’t extend too long.
Use it the Right Way!