3

我有一个 1 x 70 像素的页脚，设置为背景和水平平铺。

如果网页上不包含很多内容，它将在页脚应该在的位置上方显示页脚。我希望它用纯色填充，所以如果他们向下滚动，它不会显示页脚，然后是页脚下的白色。

这是我为页脚设置的样式。

.footer{
    background:#055830 url('/images/footer_tile.gif') repeat-x top left;
    color:#fff;
    font-size:12px;
    height: 70px;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
}

替代文字

我希望页脚看起来像这样： 替代文字

4

5 回答 5

4

请澄清 - 你想要底部的纯绿色吗？如果是这样，只需为 body 设置一个绿色背景...

body {
    background-color:#060;
}

这应该会在您的第二个屏幕截图中为您提供结果。更改颜色以匹配渐变图像的底部。

如果您希望脚钉在底部，请使用提到的绝对定位，并将背景设置为与渐变图像的顶部相匹配。

于 2008-10-16T18:20:16.950 回答
1

你可以改变你的身体风格，让页脚融入其中。

body {

background: rgb(173, 173, 173);
}
于 2008-10-16T18:25:49.620 回答
0

您可以使用

position:absolute;
bottom: 0;

将页脚始终放在底部...

于 2008-10-16T18:14:45.527 回答
0

尝试以下操作：

.footer{
    background:#055830 url('/images/footer_tile.gif') repeat top left;
    color:#fff;
    font-size:12px;
    height: 100%;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
}

我改变了两件事：背景设置为“重复”而不仅仅是“重复-x”，这样它也会重复下来。并且高度设置为“100%”，这应该使其扩展以填充可用空间。

于 2008-10-16T18:15:33.840 回答
0 
.footer{
    background:#055830 url('/images/footer_tile.gif') repeat top left;
    color:#fff;
    font-size:12px;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
    position:absolute;
    bottom: 0;
}

我尝试了将底部设置为零的绝对位置，这是它所做的屏幕。

它在页脚和 col-middle alt 文本之间显示一个空格 http://img266.imageshack.us/img266/7051/picture4vb3.jpg

于 2008-10-16T18:28:51.877 回答