바닥 글에 바닥 글이 첨부 된 고정 바닥 글

Question

960 격자를 사용하는 사이트에서 작업하고 있습니다. 사이트 하단에는 페이지 콘텐츠와 100 % 너비의 이미지가 포함되어있는 바닥 글 사이에 div가 있으므로 브라우저 너비에 따라 크기가 조정됩니다. 여기에서 데모를 확인할 수 있습니다. http://redone.org/_dev/ski/menu2.html

내용이 길기 때문에 위의 내용은 문제가 없습니다. 그러나 내용이 짧은 페이지에서는 이미지와 바닥 글이 위로 이동하여 바닥 글과 브라우저 하단 사이의 원하지 않는 공간을 나타냅니다 (상단 탐색 메뉴의 "MENU 1"또는 위에 제공된 링크의 로고 클릭). 홈페이지를 방문한 후 바닥 글 밑의 문제를 확인하려면 크기를 조정하십시오.

CSS 고정 바닥 글 메서드 (cssstickyfooterDOTcom)와 비슷한 방법을 사용하고 싶습니다.

이미지 크기 조정으로 인해이 문제를 해결하는 데 어려움이 있습니다. 이미지 높이가 변하면 jQuery를 사용하여 바닥 글의 높이/오프셋을 업데이트해야 할 수도 있습니다.

도움을 주시면 감사하겠습니다.

P. 위의 링크 괴괴 망에 관하여 유감스러운. 나는이 포럼을 처음 사용하고 있으며, 내 문제를 시각적으로 설명하기 위해 하나의 링크 만 있고 이미지는 게시하지 않을 것입니다.

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();