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).

by thirdender

HTML

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

SCSS

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

$sidebar-width: 20%;

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

#sidebar {
  position: absolute;
  left: 0;
  right: 100% - $sidebar-width;
  background: blue;

  padding: .64em;

  // This padding is there to ensure that the text in the following footer has
  // space without overlapping other content in the sidebar. This is not a
  // perfect solution.
  padding-bottom: 2em;

  footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: red;
    padding: .64em;
  }
}

#container {
  background: green;
  left: $sidebar-width;
  right: 0;

  header {
    background: orange;
    padding: 1em;
  }

  #content {
    padding: 1em;
  }
}