I’m currently working on a project that requires that I use either some very tricky CSS or else JavaScript to make a left column div expand automatically to fit its parent container. The parent container and left hand nav appear on multiple pages, and there is different content, including that which is dynamically generated, so I cannot just add a height to both elements in the CSS.
CSS Solutions Available
I looked over some CSS possibilities for this, but since I was already quite far along in the development, I thought it would be best to use JavaScript to accomplish this task. This problem should be quite simple to solve, but because of current CSS limitations, it’s a little tricky, and in fact, would be easier with a table-based layout.
Enter Javascript — With Caution
The first thing a developer should consider before using JavaScript to solve a problem is whether or not the page will degrade gracefully. That is, if JavaScript is not available on the client side, will the site or page be unusable? In this case, the answer was no. The page would be perfectly usable, just not as aesthetically pleasing. And in this particular design, some users may not even notice that something is missing (namely, the bottom of a light-colored gradient background image that needs to fill the column in question).
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!
I hope my readers find this code useful. I think a CSS solution to this problem would be nice, but from the research I’ve done, it does not seem that there is an easy one. In virtually every CSS solution there will be nonsemantic markup included, so I really feel that a JavaScript solution is cleaner, and much easier, provided it’s done unobtrusively.
thanks for this code and now i want to many more this type to ex for post all time and send me