Settings - JSFiddle - Code Playground

bumbumpaw's public fiddles

A simple 100% layout

Demonstrates the use of absolutely positioned elements to affect a simple 100% height/width layout. Two key features of absolute positioning are utilized here: * The width and/or height of absolutely positioned elements can be undefined, and will be automatically assigned by either the content itself, or by defining opposite edge's positions. For example, specifying `left: 0; right: 0;` produces a 100% width element. * Absolutely positioned elements can be absolutely positioned relative to absolutely positioned parents. In other words, an absolutely positioned element does not need to have a relatively positioned parent (a misconception I held for years).

A simple 100% layout

Demonstrates the use of absolutely positioned elements to affect a simple 100% height/width layout. Two key features of absolute positioning are utilized here: * The width and/or height of absolutely positioned elements can be undefined, and will be automatically assigned by either the content itself, or by defining opposite edge's positions. For example, specifying `left: 0; right: 0;` produces a 100% width element. * Absolutely positioned elements can be absolutely positioned relative to absolutely positioned parents. In other words, an absolutely positioned element does not need to have a relatively positioned parent (a misconception I held for years).