如何让页脚垂直拉伸？

Question

我有页脚这是一个1×70像素，其被设置为背景和瓷砖horizo​​nally。

在当网页不包含的内容很多关于它的情况下，它会显示在其上放置页脚应该是页脚。我希望它用纯色填充，所以如果他们向下滚动，它不会显示页脚，那么页脚白下。

这里是我页脚的样式。

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

我换了两件事情：将背景设置为“重复”，而不仅仅是“重复-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;
}

我试图与底部设置为零的绝对位置，这里是它的所作所为的屏幕。

它显示页脚和col-中间alt text http://img266.imageshack.us/img266/7051/picture4vb3.jpg之间的空白