Липкий нижний колонтитул с изменением размера изображения, прикрепленным к нижнему колонтитулу

Question

Я работаю над сайтом, который использует сетку 960.В нижней части сайта есть разделитель между содержимым страницы и нижним колонтитулом, который содержит изображение шириной 100%, поэтому его размер изменяется в зависимости от ширины браузера.Вы можете проверить демо здесь: http://redone.org/_dev/ski/menu2.html

Выше работает нормально, потому что содержание долго.Однако на страницах с коротким содержимым изображение и нижний колонтитул ползут вверх, открывая нежелательное пространство между нижним колонтитулом и нижней частью браузера (нажмите «МЕНЮ 1» в верхней панели навигации или логотип в приведенной выше ссылке).Находясь на домашней странице, измените размер, чтобы увидеть проблему ниже нижнего колонтитула.

Я хотел бы использовать метод, аналогичный методу CSS Sticky Footer (cssstickyfooterDOTcom).

У меня трудное времяРешение этой проблемы связано с изменением размера изображения (что желательно).Я думаю, что мне может понадобиться использовать jQuery для обновления высоты / смещения нижнего колонтитула при изменении высоты изображения.

Любая помощь будет принята с благодарностью.

PS Извините за странность ссылки выше,Я новичок в этом форуме, и они позволят мне опубликовать только одну ссылку без изображений, чтобы визуально объяснить мою проблему.

Answer 1

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

CSS

body            {position: relative}
.footer         {position: absolute; bottom: 0px}
.imgbackground  {position: absolute; bottom: [footer height]}

JS

$(window).resize(function() {
    var winHeight = $(this).height();
    if(winHeght > $('body').height()) 
        $('body').height($(this).height()); // set the body height to the window height
    else $('body').height('auto'); 
}).resize();