-
Footer 하단에 고정시키기IT, 프로그래밍/Javascript 2019. 1. 2. 21:04123456789101112131415161718192021222324252627282930313233343536373839404142434445464748//문자열을 제외하고 소수점 이하까지 가져오는 정규식 (ex) 233.33px -> 233.33)window.REGEX_TRIM_DIM_SIZE_EXTEND = /(?=\D)(?=^\.)/;//Footer Objectfunction 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의 높이로 지정하는 형식을 사용합니다.
'IT, 프로그래밍 > Javascript' 카테고리의 다른 글
[javascript] Selection과 Range를 통해 내맘대로 커서 조작하기 - Selection편 (2) 2019.12.16 일정 시간이 지났는지 확인하는 함수 (0) 2018.12.27 Jquery UI와 부트스트랩 같이 사용할 때 주의점 (0) 2018.12.03 Jquery deep copy 메소드 (0) 2018.11.29 Jquery DOM clone (0) 2018.11.07