본문 바로가기

Web/javascript & jQuery

footer 하단에 붙이기

반응형

컨텐츠 내용이 창 크기보다 적을 때, footer가 바로 밑에 붙어있는게 아닌 하단에 붙어 있기 위해 사용.


css 코드

.fixed { position:fixed; bottom:0px; width:100%; }

.fixed-no { position:static; }


jquery 코드

/* footer sizing */

 var wrapper = $('#wrapper').height();

 var body = $(window).height();

 if( wrapper <= body ) {

     $("#footer").addClass('fixed');

     $("#footer").removeClass('fixed-no');

 }else if( wrapper > body ){

     $("#footer").removeClass('fixed');

     $("#footer").addClass('fixed-no');

 }

 $(window).resize(function() {

     var wrapper = $('#wrapper').height();

     var body = $(window).height();

     if( wrapper <= body ) {

         $("#footer").addClass('fixed');

     $("#footer").removeClass('fixed-no');

     }else if( wrapper > body ){

         $("#footer").removeClass('fixed');

         $("#footer").addClass('fixed-no');

     }

 });

반응형