컨텐츠의 길이에 상관없이 Footer 하단 고정을 손 쉽게...... 어 ?>~!
손쉽게 해보자 . . .. .
export function updateVH() {
const actual100vh = `${window.innerHeight}px`;
document.documentElement.style.setProperty('--100vh', actual100vh);
}
창틀을 빼고, 스크롤은 포함한 크기 window.innerHeight 를 우선 구해서
css 속성을 새로 설정한다.
setProperty()
- object.setProperty(propertyname, value, priority)
- 필수로 propertyName 을 설정. 속성명을 새로 설정하는 것
- value 와 priority 는 선택값으로, 나는 구한 innerHeight 로 새 속성값을 부여하기루 한다 ...
그래서 위에 적은 함수를 import 해와서
function useVH() {
useLayoutEffect(() => {
window.addEventListener('resize', updateVH);
return () => window.removeEventListener('resize', updateVH);
}, []);
}
컨텐츠 길이에 상관없이 footer 를 고정할 때 사용할 수 있게 custom hook 로 만들어둡니다.