100% Height div, scrollbars 50px off screen due to margin-top 50px. overflow auto

Question

I am trying to layout a page that has a horizontal navigation bar across the top and content area that will gain scrollbars when the content is too big.

My current way of doing this is a div width 100%; height 50px; position absolute; top 0; left 0; and then a second div with height 100%; width 100%; margin-top 50px; overflow:auto; however, the scrollbar that appears is offset by the 50px margin and as such pushes the content off the bottom of the page. If i remove the margin it all works but it puts the content behind the navigation bar.

I also tried wrapping it in a container an experimenting with putting the margin their and the overflow in the child but this still didn't seem to have the required effect.

jsFiddle, with comments to try explain it better.

http://jsfiddle.net/Piercy/hggXJ/

HTML

<div id="nav">
  <h1>Navigation</h1>
</div>
<!-- <div id="contentContainer"> -->
  <div id="content">
    <div id="oversizeContent">
        <p>You can see the black border on this green box, but you cannot see the bottom black border. Similarly you cannot see the bottom arrow of the scrollbar.</p>
        <p>I tried putting a wrapper around the content and putting the margin on that but the scrollbar still over flows  Uncomment the contentContainer div and comment/uncomment the corresponding  css.</p>
    </div>
  </div>
<!-- <div> -->

CSS

html, body
{
  height:100%;
  overflow:hidden;
  color:white;
  font-weight:bold;
}

#nav
{
  height:50px;
  width:100%;
  background-color:red;
  position:absolute;
  top:0;
  left:0;
  z-index: 2;
}
#contentContainer
{
  /* uncomment this if you bring #contentContainer into play */
  /* 
      margin-top:50px;
      position:absolute;
      top:0;
      left:0;   
  */


  height:100%;
  width:100%; 

}
#content
{
  /* moving this into #contentContainer doesnt help either */
  /* comment this if you bring #contentContainer into play */

      margin-top:50px;
      position:absolute;
      top:0;
      left:0;



  width:100%;
  height:100%;

  background-color:blue;
  z-index: 1;
  overflow: auto;
}
#oversizeContent 
{
  background-color:green;
  width:400px;
  height:1000px;
  border:10px solid black;
}

Answer 1

instead of height:100%; do bottom:0; and it will go to the bottom of the relative parent or viewport if there is no container set to position:relative;

DEMO