如何使頁腳垂直拉伸？

我有一個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

如何使頁腳垂直拉伸？

回答

相關問題