Html CSS-页眉-始终为底部页脚和100%内容

问题是：

我如何做到这一点：页眉顶部16px， 内容动态100%高度， 页尾页脚

若我给了100%的内换行DIV，那个么它们在页脚后面是空白

---

Thx

你的身高太高了：

从选择器中删除

最小高度

和

最大高度

值

移除

位置：绝对
；从您的
#wrap
分区

我举了一个例子。
对于底部固定位置的页脚，在滚动网页时不会移动，请使用以下方法：

html { height:100%; max-height:100%; }

body {
    margin:0;
    padding:0;
    height:100%;
    max-height: 100%;
}

#wrap {
    min-height:100%;
    height: 100%;
    position:relative;
}
* html #wrap { height:100% }

#inner-wrap {
    padding-bottom:50px;
    min-height: 100%;
}
#inner-wrap:after {
    content:" ";
    display:block;
    clear:both;

}
* html #inner-wrap {
    height:100%;
}

#header
{
    width: 100%;
    background-color: #C0C0C0;
    height: 16px;
    color: White;
    text-align: center;
    position: relative;
    top:0px;
}
#footer
{
    width: 100%;
    background-color: #C0C0C0;
    height: 50px;
    position:absolute;
    bottom: 0;
    color: White;
    text-align: center;
}
#content
{
    width: 1000px;
    height: 100%;
    background-color: #F5FDEC;  
    margin: 0 auto 0 auto;
}

我认为解决方案的一部分是添加
身体{height:100%；}
，谢谢@Pekka。这是不可读的。抱歉，我添加了CSS部分的主体，主体{height:100%；}，但这没有效果。当内容变得更大时似乎不起作用。。。将页脚位置更改为相对：也进行编辑以删除不必要的规则。另一个添加了jQuery的示例向您展示了添加更多内容实际上会使页脚保持在应该的位置：）
html { height:100%; max-height:100%; }

body {
    margin:0;
    padding:0;
    height:100%;
    max-height: 100%;
}

#wrap {
    min-height:100%;
    height: 100%;
    position:relative;
}
* html #wrap { height:100% }

#inner-wrap {
    padding-bottom:50px;
    min-height: 100%;
}
#inner-wrap:after {
    content:" ";
    display:block;
    clear:both;

}
* html #inner-wrap {
    height:100%;
}

#header
{
    width: 100%;
    background-color: #C0C0C0;
    height: 16px;
    color: White;
    text-align: center;
    position: relative;
    top:0px;
}
#footer
{
    width: 100%;
    background-color: #C0C0C0;
    height: 50px;
    position:absolute;
    bottom: 0;
    color: White;
    text-align: center;
}
#content
{
    width: 1000px;
    height: 100%;
    background-color: #F5FDEC;  
    margin: 0 auto 0 auto;
}

#footer{
position:fixed;
clear:both;
}