100% Css-layout with header and footer

I'm trying to create a layout with a header and footer (both of which have a fixed heights) and a content-div between them that is fills the remain开发者_JS百科ing space. Within the content-div I want to have divs with heights that are based on percent values (with the content-div's heihgt as parent). I can't figure out how to do this?

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

---

[See it in action]

  #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; 
  }

---

.header {
  position: absolute;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
}

.footer {
  position: absolute;
  height: 50px;
  left: 0;
  bottom: 0;
  right: 0;
}

.content {
  position: absolute
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 50px;
}

.box1 {
  width: 30%;
  height: 50%;
}

---

For a solution where the footer sticks to the bottom of the screen or the bottom of the content (whichever is further from the top), check out Ryan Fait's "sticky footer". It's a lightweight and robust handful of CSS, and it's usually what you want for your layout.

http://ryanfait.com/sticky-footer/