页眉和页脚之间100％高度的div(100% height div between header a

我试图创建具有页眉/页脚（100％的宽度，145px高度），页眉/页脚之间的“主区域”（100％的宽度，动态高度）的网页布局，以及围绕其为内容物的容器独特的背景颜色（860px宽度，动力高度但总是“齐平”对抗页脚）。

（用于视觉参见实施例）

我遇到的问题是，我似乎无法有“内容容器”永远与页脚冲水时有最小的内容。使用类似于（设置原来的例子）的结果在页脚漂浮在所述内容，如果有一个尊敬/“正常”的内容的量或，如果窗口被调整大小。

下面CSS导致内容和页脚之间的间隙。

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

我怎样才能让内容容器是屏幕的完整高度时，含量极微，并有页脚“大棒”到页面的底部，同时还动态适当地调整，如果有内容的正常量（页脚总是在内容的底部）？

谢谢！

Answer 1:

FIDDLE： http://jsfiddle.net/3R6TZ/2/

小提琴输出： http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

UPDATE

在#content-spacer-top和#content-spacer-bottom被用来垫＃内容的div不使用填充或裕度将增加箱尺寸过去的100％的高度造成的问题。

在CSS3，有box-sizing性能（更多在这里信息），可以解决这个问题，但我假设你不希望依赖于CSS3功能。

编辑

增加了一个修正和测试到IE7

更新2

使用另一种方法:before和:after伪元素来代替隔离物的div： http://jsfiddle.net/gBr58/1/

在IE7或6不行的，虽然，在IE8的工作，一个<!DOCTYPE>必须（根据声明w3schools.com ），但HTML是非常干净的

更新3（对不起，这么多的更新）

其更新下来工作IE6。我通常不打扰我的公司不支持IE6，但它是一个简单的办法...

Answer 2:

我认为你需要的位置是：固定的页脚：

footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}

文章来源: 100% height div between header and footer