Patternslib/Patterns — pull request #307 by wichert (2013-06-12 14:01:31+00:00)
Title: Equaliser

A common layout problem is that one like to have a group columns that are visually outlined to be of equal height, regardless the content in the columns. In CSS this is often difficult to achieve.

I propose an equaliser pattern for this.

Consider the following markup:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Minimal content

pat-equaliser would measure it's direct child elements. Each direct child element then gets the height equal to the content height of the tallest measured direct child element.

The calculation is repeated upon:
- Window resize
- Depends pattern happening within the pat-equaliser container
- Toggle pattern happening within the pat-equaliser container
- Switch pattern happening within the pat-equaliser container
- Inject pattern happening within the pat-equaliser container
- Other?

This CSS is required to make .panel take the of a column that has an absolute height on it:

.column > .panel,.columns > .panel {
height: 100%;
}