logo

모바일 웹에서 100vh 적용하기

* 관련 기술 스택이 없습니다
emoji

• 모바일에서 스크롤 없이 높이를 딱 맞게 사용하려고 height: 100vh로 설정했지만, 실제 모바일 기기에서는 높이가 딱 맞지 않고 스크롤이 생겼다.
• 이는 100vh가 상단 주소창 영역과 하단의 네비게이션 영역의 사이즈까지 반영하지 못하기 때문이다.
• 이를 해결하기 위해 javascript에서 window.innerHeight를 이용해 1vh를 계산해 주면 된다.
• 그리고 css에서 vh로 사용할 값을 지정해주면 된다.

thumbnail
북마크
공유하기
신고하기
1분 분량
조회수 209
profile-image소르빔
일 년 전
Copyright © 2025. Codenary All Rights Reserved.