1

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

这可能吗？

我的小提琴。

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
}
4

2 回答 2

1

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

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

或者，如果您想随页面滚动：

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

于 2013-07-12T22:28:52.550 回答
0

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

于 2013-07-12T22:06:06.537 回答