July 28, 2010
The first step in a fully liquid page is to use CSS to assign a 100% value to the html height and width. If the window is resized, however, some browsers size elements with 100% only to the edge of the visible window, and don’t fill scrollable content.
Where margins add size to element heights, I use Jquery to quickly capture margin sizes, and parseInt() to remove “px” from the CSS value. Call the scripts when the page loads and when the page is resized. Again, I favor jQuery’s $(document).ready() as a sure-fire way to manage functions called when the page loads.
c = document.getElementById('page').offsetHeight;
//jquery retrieves css value of margins
e = $("#page").css("margin-top");
//rewrite the CSS value as an integer
c = c + parseInt(e)
//do the same for the bottom margin
f = $("#page").css("margin-bottom");
c = c+ parseInt(f) ;
h = (document.getElementById('container').offsetHeight - 130)
//write offset height as CSS by adding "px" to integer
hpx = h + "px"
//set height of target elements
document.getElementById('content-wrapper').style.height=hpx; document.getElementById('fullscrn').style.height=hpx; }
//call function when page resized
window.onresize = fullWin;
//use jQuery to call function on page load