html - 100% 没有 div 的页脚

Question

我正在制作一个基于不使用 DIV 的模板，但我在页脚方面遇到了问题。我想知道我是否可以有一个 100% 宽度的页脚(有点像 stackoverflow)，它实际上粘在底部，在添加更多内容并保持背景颜色时不会修复或 overflow hidden 。

这可能吗？

我的 Fiddle .

header, article {
    margin: 0 auto;
    display:block;
    width:500px
}
html, body {
    height:100%
}
body {
    min-height:100%;
    margin:0
}
header, article, section {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:black
}
footer {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background:grey
}
footer p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
footer article {
    height:50px;
    width:100%
}
footer section {
    background:black;
    height:50px;
    width:100%
}
footer section p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
header, article {
    margin: 0 auto;
    display:block;
    width:500px
}
html, body {
    height:100%
}
body {
    min-height:100%;
    margin:0
}
header, article, section {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:black
}
footer {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background:grey
}
footer p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
footer article {
    height:50px;
    width:100%
}
footer section {
    background:black;
    height:50px;
    width:100%
}
footer section p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}

Answer 1

我有一个示例，其中页脚是 fixed 并使用 body:after 添加填充以使其可滚动。

jsfiddle:http://jsfiddle.net/wk8Jf/3/

或者如果你想滚动页面:

jsfiddle:http://jsfiddle.net/wk8Jf/5/