Liquidly extending CSS boxes

Tuesday, 3 Nov 2009

This effect is so simple in concept that it seems astonishing I haven't heard of it before. Below is a demonstration; relevant properties are set in strong type, the rest is less important. Obviously the same technique could be applied to stretch a child across its container's width rather than height.

One last issue does remain: the container must explicitly be forced to a minimum height sufficient to contain the extending child.

The technique is tested and and confirmed to work on pretty much every browser with good CSS1 support — except, predictably, in Internet Explorer up to and including 6.0/Windows and 5.5/Mac.

The properties for this box create a new positioning context for child elements, and make sure that the content of this box doesn't spill under the liquid box.

border: 1px dotted #fff;
height: 50em;

position: relative;
padding-right: 285px;

Here comes the key: this box is pulled out of the normal flow for absolute positioning. Its top and bottom edges are then forcibly pulled apart to span the containers's entire height. Voilà, a liquid full-container-height box.

border: 1px dotted #fff;
background-color: #301;

position: absolute;
top: 5px;
bottom: 5px;
width: 280px;
right: 5px;

Observe how no height has been specified at all, yet the box spans the entire height of its container. It is also worth noting that a width must be defined.

Referenced in Liquidly extending CSS boxes.