带页眉和页脚的100%Css布局

Question

我正在尝试创建一个带有页眉和页脚的布局(两者都有固定的高度)和一个填充剩余空间的内容div.在content-div中,我希望div具有基于百分比值的高度(以content-div的heihgt为父级).我无法弄明白该怎么做？

这是我想要完成的一个例子. 布局示例http://img22.imageshack.us/img22/45/layoutbz.png

Answer 1

[ 看到它在行动 ]

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