Как сделать нижний колонтитул растягиваться вертикально?

Question

У меня есть нижний колонтитул, который является 1 x 70px, который установлен как фон и плитки горизонтально.

В тех случаях, когда на веб-странице не содержится много контента, на нем будет отображаться нижний колонтитул выше, где должен находиться нижний колонтитул. Я хочу, чтобы он заполнился сплошным цветом, поэтому, если они прокрутятся вниз, он не покажет нижний колонтитул, а затем белый под нижним колонтитулом.

Вот мой стиль для нижнего колонтитула.

.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

Answer 1

Просьба уточнить - вы хотите, чтобы сплошной зеленый снизу? Если это так, просто установить зеленый фон для тела ...

body { 
    background-color:#060; 
} 

Это должно дать вам результат в вашем втором скриншоте. Измените цвет, чтобы он соответствовал нижней части изображения градиента.

Если вы хотите, чтобы нога была привязана к нижней части, используйте указанное абсолютное позиционирование и установите фон в соответствии с верхней частью градиентного изображения.

Answer 2

Вы можете использовать

position:absolute; 
bottom: 0; 

поставить колонтитула в нижней части всегда ...

Answer 3

Попробуйте следующее:

.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 4

Вы можете изменить свой стиль тела так, что сноска гармонирует.

body { 

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

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