서론
스타일로 100vh 속성을 많이 사용을 하였다.
일반 적인 브라우져에서는 큰 이슈는 없었지만 모바일 환경에서는 이슈가 꽤 있었다.
이슈확인
그냥 볼땐 문제가 없지만 스크롤을 할 경우 url바가 hidden 하는 상태가 되면서 resize event는 일어나지만 100vh의 값은 처음 보았을때 그 화면 크기 대로 보여지기 때문에 하단에 여백이 생기는 이슈가 있다.
js로 resize 할때 마다 높이를 지정해주면 되지만 그럴 경우 높이를 지정해줄 node들에 대해서 class를 주어 제어를 하거나 혹은 꼭 100vh 가 아닌 50vh나 30vh 같은 높이로 하고 싶을때 각각 js에서 제어를 하던가 아니면 각 값에 따른 class도 지정해줘야 한다.
본론
resize를 하기 때문에 js는 사용을 해야 할거 같다.
html 커스텀 속성으로 값을 주고 그걸 기준으로 vh를 사용할 node는 평소처럼 style로 제어를 하려고 한다.
const vh () => {
document.documentElement.style.setProperty("--vh", `${(window.innerHeight*0.01)}px`);
}
vh();
window.addEventListener("resize", vh);html node에 커스텀으로 --vh 만들고 window.innerHeight를 백분화하여 넣어준다. (백분화를 안하고 넣어도 된다. css에서 vh스타일 지정해줄때 값만 바꿔주면 된다. 백분화를 하는 이유는 좀더 직관적으로 사용하기 편하게 하려고 했다.)
.vh-node {
height:100vh;
height: calc(var(--vh, 1vh) * 100);
}스타일에서 위 코드 처럼 넣고 처음 window.innerHeight의 백분화로 넣었으면 곱하기 100을 해주고 백분화를 안하면 안곱해도 된다. 50vh 나 30vh 등 원하는 값만큼 곱해주면 된다.
PUBGYU