100% CSS 布局，带页眉和页脚

我正在尝试创建一个带有页眉和页脚（两者都有固定高度）以及它们之间的内容 div 的布局，该内容填充剩余空间。在 content-div 中，我想要具有基于百分比值的高度的 div（以 content-div 的 heihgt 作为父级）。我不知道该怎么做？

Here is an illustration of what I'm trying to accomplish.

[查看实际效果 http://jsbin.com/erawu3]

  #header { 
    position:absolute; 
    height: 50px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #footer { 
    position:absolute; 
    height: 50px; 
    left:0; 
    bottom:0; 
    width:100%;
    background:green;
  }

  #content { 
    position: absolute; 
    top:50px; 
    bottom:50px; 
    left:0;
    width:100%;
    background:#eee; 
  }

  #box1 { 
    height:50%; 
    width:30%; 
    float:left; 
    background:red; 
  }