html - 页脚粘在底部，内容包装器填充可用空间

Question

我正在处理网页布局:

1. 页眉和页脚应全宽，内容窄且居中
2. 页脚位于屏幕底部或页面底部，具体取决于内容长度
3. 如果内容没有填满整个屏幕，它的包装器无论如何都应该填满屏幕

前两点没问题，但现在我只能使用 Javascript 来拉伸(stretch) body 。 CSS min-height: 100% 不起作用，是否有可能在纯 CSS 中解决此问题？

这是 a Fiddle包括一个快速而简单的 jQuery 解决方案的场景。

Answer 1

这是您的 css。无需更改...只需进行一些编辑...

删除最小高度，而只是高度，对于部分的 id，只需提供 height:100%

html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}
#layout-helper-wrapper {
height: 100%;
    position: relative;
    margin: 0px auto;
    background-color: #eee;
    overflow: hidden;
}

header, footer {
    background-color: #fb2;
    margin: 0px;
    z-index: 2;
    width: 100%;
    position: absolute;
}
header {
    height: 30px;
}
footer {
    height: 20px;
    bottom: 0;
}

#body-wrapper {
    width: 500px;
    margin: 0px auto;
    background-color: #fff;
    position: relative;
    box-shadow: 0px 0px 8px 3px #aaa;
    padding: 30px 20px 20px;
    overflow: hidden;
    height:100%;
}

http://jsfiddle.net/AJ9hr/11/