Нижний колонтитул в нижней части браузера, кроме случаев, когда я прокручиваю - PullRequest
Новая
       20

Нижний колонтитул в нижней части браузера, кроме случаев, когда я прокручиваю

4 голосов
/ 22 марта 2012

У меня странная проблема с нижним колонтитулом.

http://jsfiddle.net/YGAvd/

Облака внизу страницы будут прилипать к нижней части окна браузера, если я увеличу или уменьшу окно. НО, когда я прокручиваю вниз, нижний колонтитул закручивается в середине страницы. Это не проблема ни на одной из моих других страниц, потому что все они помещаются в окно 900x600 до появления полосы прокрутки.

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

Ответы [ 2 ]

5 голосов
/ 22 марта 2012

В нижнем колонтитуле CSS-правила измените 'position: absolute;'to 'position: fixed;'

Вам также может понадобиться поиграть с несколькими другими определениями, но это работает.

проверить

Вот мое последнее правило нижнего колонтитула 

footer {
    position: fixed;
    color: black;
    width: 100%;
    height: 4.6em;
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
    background-repeat: repeat-x;
    background-color: e0e0e0;
    z-index: -999;
    overflow: hidden;
    bottom: 0px;
}
1 голос
/ 22 марта 2012

Не помещайте фоновое изображение в нижний колонтитул .... сделайте его фоновым изображением тела!

Затем сделайте так, чтобы тег вашего тела выглядел следующим образом: 

body {
    line-height: 1;
    overflow: auto;
    background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
    background-repeat: repeat-x;
    background-position:bottom center;
    background-attachment:fixed;
    background-color: #b1ceff;
    font: normal 95% Sathu, Verdana, Arial, Tahoma;
    text-align: center;
    height: 100%;
}

Не делайте 'не забудьте удалить код из нижнего колонтитула для изображения.ТАКЖЕ, удалите цвет фона в нижнем колонтитуле, чтобы избежать каких-либо проблем.

...