[CSS] 모바일 크롬, 사파리 뷰에서 100vh 스크롤이 생기는 문제 해결

Pakxe·2023년 1월 29일
0

CSS

목록 보기
3/3
post-thumbnail

1. js

function setScreenSize() {
	let vh = window.innerHeight * 0.01;
	document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setScreenSize();
window.addEventListener('resize', setScreenSize);

html에 script에 추가한다.

2. css

html, body, #root {
      height: 100vh; /* 혹시나 Custom Property 지원 안하는 브라우저를 위한 복귀점(Fallback) */
      height: calc(var(--vh, 1vh) * 100);
      width: 100%;
  }
profile
내가 꿈을 이루면 나는 또 누군가의 꿈이 된다.

0개의 댓글