aLiquidize

This is a UI tool that allows the creation of vertical liquid layouts. Like this.

This class has been tested working on Internet Explorer 6.0->8.0, Firefox 1.0->3.6, Chrome 5.0, Safari 4.0->5.0, Opera 9.0->10.0 and iOS 3.0->4.0 (iPhone, iPad).

Usage

  1. Choose a specific tag: all the children will be part of the liquid resizing.
  2. Be careful with CSS: make sure that no children have any top or bottom property varying its height.
  3. Define at least one child with the tag "liquidize" in order to make it vertically liquid.
  4. Execute aLiquidize.vertical("#id") once when the dom has completed loading.

Examples

Check the demo page here.

Simple without jQuery, can be used standalone everywhere, with just one more attribute attached to the body tag: 

<body onload="aLiquidize.vertical('#all');">

With jQuery, you can just add the initialization line inside you jQuery ready callback. Note that in this situation you can use more complex selectors as the first parameter: 

$(document).ready(function() {
  aLiquidize.vertical("#all .content");
});

Download

Download version 1.0 here (3.1kb).