IT, 프로그래밍/Javascript

Footer 하단에 고정시키기

오리@ 2019. 1. 2. 21:04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//문자열을 제외하고 소수점 이하까지 가져오는 정규식 (ex) 233.33px -> 233.33)
window.REGEX_TRIM_DIM_SIZE_EXTEND = /(?=\D)(?=^\.)/;
 
//Footer Object
  function Footer(){
 
         let $footer;
             (function(){
                  $footer = $("footer");
             })();
 
        //Footer의 높이를 반환하는 함수
             this.getFooterHeight = function(){
           let footerHeight = $footer.css("height").replace(window.REGEX_TRIM_DIM_SIZE_EXTEND, "");
           return parseInt(footerHeight, 10);
        }
 
   }
 
    //화면 크기에 맞게 footer를 맞추는 함수
   function setWindowSize($element){
 
       let documentHeight = $(document).height();
       let footerObj = new Footer();
       let bodySize = documentHeight - footerObj.getFooterHeight() - navbarObj.getNavbarHeight();
       $element.css("min-height", bodySize);
 
   }
 
   $(document).ready(function(){
 
       setWindowSize($(".section"));
 
 
    //window 크기가 달라질 때 마다  footer 위치를 재배치함
       $(window).on("resize", function(){
 
           console.log("resize!");
           setWindowSize($(".section"));
 
 
       });
 
   });
 
 
 
 
cs



window별로 사이즈가 달라져도 Footer를 document의 하단부에 고정시키는 방법입니다.

document의 크기를 가져와서 정규식으로 문자열을 제거 후 header와 footer의 길이를 뺀 높이를 body의 높이로 지정하는 형식을 사용합니다.