title: Height 100% minus the top navigation
body: <p>I have a site that has a top navigation bar, a header, a sidebar and a content body next to the sidebar. The header, sidebar, and content body are positioned absolutely so that they don't move when you navigate to other pages that are using the same template. The sidebar and content body have scroll bars. The header and sidebar are always visible even with scrolling. This works great as shown in the demo. But suppose the top navigation changes height. Then the vertical alignment is off. Since this site is using a global top navigation that's used in other sites as well, the top navigation can change at any moment. When it does change, this layout will not be future proof. Is there a way to make this future proof?</p>
  
  <p>What I have currently:
  <a href="http://codepen.io/codingninja/pen/nKwox" rel="nofollow">http://codepen.io/codingninja/pen/nKwox</a></p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
  }  
  .content {
      /*position: relative;*/
  }
  .top-nav {
      background: #000;
      height: 42px;
      color: #fff;
  }
  .header{
      position: absolute;
      height: 100px;
      width: 100%;
      background: #ddd;
  }
  .sidebar {
      position: absolute;
      top: 142px;
      left: 0;
      bottom: 0;
      background: #aaa;
      overflow-y: auto;
      overflow-x: hidden;
      width: 100px;
  }
  .body {
      position: absolute;
      top: 142px;
      right: 0;
      left: 150px;
      bottom: 0;
      overflow-y: auto;
      overflow-x: hidden;
  }
  </code></pre>
  
  <p>What happens when the top nav changes height:
  <a href="http://codepen.io/codingninja/pen/nICzK" rel="nofollow">http://codepen.io/codingninja/pen/nICzK</a></p>
  
  <pre><code>.top-nav {
      background: #000;
      height: 100px;
      color: #fff;
  }
  </code></pre>