Tech Notes

HTML, CSS, JavaScript, PHP and programming for the Web

Easy Javascript for Liquid Layout

David Collins

July 28, 2010

 

Do you sometimes encounter difficulty getting HTML containers to size correctly? A few lines of Javascript can put an end to many resize problems related to liquid Web-page layout features.

 

In most cases, content in a Web-page container can be sized to fill any area with CSS width and height values set at 100%.  Sometimes, though, requirements of other nested and stacked div tags can turn fully resizable elements into a perpetual problem. Stick-to-the-bottom features in vertically liquid layouts can be especially difficult when the design requires complex nesting and stacking of elements. For those occasions, a Javascript function can maintain a fully liquid layout.

 

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.

 

In other cases elements assigned positions away from the edge of the window and 100% width or height are rendered 100% of the full window width, and then overflow the container by the amount they are set away from the container on the opposite edge. In many cases, re-arranging the nesting, correcting absolute or relative positioning, and changing the stack order can correct the problem. When none of that works, Javascript can easily solve most remaining liquid-layout problems.

 

A Javascript solution is to use offsetHeight of a full-sized element as the basis for resized elements. To be certain an unnested element will fill the window, yet stop floating up where it meets content from another container in another nest or stack, get the offsetHeight value of the containing element, the offsetHeight of the resized element and the offsetHeight of the elements that establsish minumum height.

 

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.

<script type="text/javascript">

  function fullWin(){   
 
  //plain old Javascript gets offsetHeight of element used to set minimum height of other elements (avoid ninHeight, not supported in IE)

  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)  ;    

//plain old Javascript gets offsetheight of containing element, minus pixels between container and edge of window -- in this case, 130px

h =  (document.getElementById('container').offsetHeight - 130)
    
//write offset height as CSS by adding "px" to integer

hpx = h + "px"

//use javascript "if" statement to set minimum height, otherwise let CSS manage vertical spacing

if(c<h){   
     
//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

 $(document).ready(function(){fullWin();});       

  </script>

 

Share | Del.icio.us | Digg | E-mail a link