Question

我正在尝试使用页眉和页脚（两者都有固定的高度）创建一个布局，并在它们之间创建一个填充剩余空间的内容div。在content-div中，我希望div具有基于百分比值的高度（以content-div的heihgt为父级）。我无法弄清楚如何做到这一点？

以下是我想要完成的事情的说明。 layout example http://img22.imageshack.us/img22/45/layoutbz.png

Answer 1

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

Answer 2

.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%;
}

Answer 3

对于页脚粘贴在屏幕底部或内容底部（以较高者为准）的解决方案，请查看Ryan Fait的“粘性页脚”。它是一个轻巧而强大的一小部分CSS，它通常是你想要的布局。

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

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

3 个答案:

[See it in action]