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

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

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

Я попробовал абсолютную позицию с установкой дна на ноль, вот экран того, что он сделал.

Отображает пробел между нижним колонтитулом и серединой колла альтернативный текст http://img266.imageshack.us/img266/7051/picture4vb3.jpg

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

Я изменил две вещи: фон установлен на «повтор», а не просто «повтор-х», так что он также будет повторяться вниз. И высота установлена ​​на «100%», что должно увеличить ее, чтобы заполнить доступное пространство.

Answer 5

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

position:absolute;
bottom: 0;

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