A simple 100% layout (CSS only)

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). The original fiddle is located at http://jsfiddle.net/thirdender/q9yL6/, and uses SCSS. This fiddle is a little simpler, but the SCSS styling has been replaced with straight CSS.

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu"></script>
<div id="container">
  Main content here
</div>
<div id="sidebar">
  <div class="padding">
    Sidebar
  </div>
</div>

CSS

html, body {
  height: 100%;
}
body {
  margin: 0;
  overflow: auto;
  font: 12px Ubuntu, Arial, sans-serif;
}

#sidebar, #container {
  position: absolute;
  top: 0;
  bottom: 0;
}

#sidebar {
  position: absolute;
  left: 0;
  width: 200px;
  background: red;
}
#sidebar .padding {
    /* padding: .64em; */
}

#container {
  background: green;
  left: 200px;
  right: 0;
}