      
Recently, I've run into the problem where I just could not get my div to place at the correct place with dynamic content and only using css for the layout. So, I made a little script using javascript to place the div the correct distance from the top of the page even with dynamic content! The script is actually really easy to follow, and it is commented.
function fixHeight() {
var content = document.getElementById('content_div_id').offsetHeight; // content height
var navigation = document.getElementById('navigation_div_id').offsetHeight; // nav height
var size; // this will hold the size of the largest part of the page
var banheight = 200; // this is how many pixels are in the banner and whatever else may be on top of the content
size = navigation + banheight; // make size = navigation + banner height.
document.getElementById('wrapper').style.height = size + "px"; // set wrapper div to size var
document.body.style.height = size + "px"; // set body height to size var
}You must change the content and navigation vars to match your div id's. If you've noticed, there is a call to a "wrapper" element. This div must encompass the entire layout, with the footer, or whatever else you're trying to position at the bottom of the page, being after the wrapper. The body style height call makes sure that your footer will be positioned perfectly with the bottom of the page, you may remove that line if you do not want that. The final step to implementing this is to place a call to the javascript code. This can be done by following the steps below. <script src="/fixHeight.js"></script> <!--- insert into head ---> <body onload="javascript:fixHeight();"> <!--- this will automatically run the height fix function ---> This is basically just telling the fixHeight() function to run as soon as the page is loaded. This requires that your visitor's using IE allow the website to run activeX controls on their computer. This may not be the most practical method, but when all else fails, this will work for you like it does for me! 
Dig this tutorial?
Thank the author by sending him a few P2L credits!
 
|
