如何使页脚垂直拉伸？

Question

我有一个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%;
}

我希望页脚看起来像这样：

Answer 1

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

body {
    background-color:#060;
}

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

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

Answer 2

您可以更改您的体型，以便页脚混合。

body {

background: rgb(173, 173, 173);
}

Answer 3

您可以使用

position:absolute;
bottom: 0;

总是将页脚放在底部......

Answer 4

尝试以下方法：

.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%;
}

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

Answer 5

.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;
}

我尝试了将底部设置为零的绝对位置，这是一个屏幕显示它的作用。

它在页脚和中间之间显示一个空白区域 alt text http://img266.imageshack.us/img266/7051/picture4vb3.jpg