Question

我正在制作一个基于不使用DIVs的模板，但我的页脚有问题。我想知道我是否可以有一个100％宽度的页脚（有点像stackoverflow）实际上粘在底部，当添加更多内容并保持背景颜色时不会修复或隐藏溢出。

这可能吗？

我的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/

Answer 2

元素上的绝对位置似乎是个问题。

100％页脚没有div

2 个答案: