如何使页脚垂直拉伸？

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

alt text http://i34.tinypic.com/2q9xk02.jpg

我想页脚看起来像这样： alt text http://i37.tinypic.com/2ng4ew9.jpg

来源

2008-10-16 Brad

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

body { 
    background-color:#060; 
}

这应该给你结果你的第二个屏幕。更改颜色以匹配渐变图像的底部。

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

来源

2008-10-16 18:20:16

body { \t background-color：＃005130; } 谢谢。 – Brad 2008-10-16 18:31:00

您可以使用

position:absolute; 
bottom: 0;

把页脚始终在底部...

来源

2008-10-16 18:14:45

我觉得这是不好的易用性，具有长期的内容有从下面滚动之间的空格...您可以在内容，以便设置下边距它从来没有完全模糊，但它不正确。 – starmonkey 2010-05-20 13:36:23

请尝试以下操作：

.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-16 18:15:33

使页脚中融合了你可以改变你的车身风格。

body { 

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

来源

2008-10-16 18:25:49

.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

来源

2008-10-16 18:28:51 Brad

如何使页脚垂直拉伸？

回答

相关问题