모바일에서 vh대신 svh를 사용해서 주소창을 제외한 높이를 구해보자
·
웹 프론트엔드
안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다. 모바일 환경에서도 시험 문제를 풀 수 있게 하기위해서 반응형으로 개발하던 중 문제가 사소한 문제가 발생했는데요.문제를 푸는 화면의 크기를 꽉차게 하고 싶어 height: 100vh로 했지만 주소창의 크기로 인해서 스크롤이 되는 문제였습니다. 아래의 동영상을 참고해주세요. vh는 CSS에서 사용하는 단위로, 뷰포트(viewport)의 높이에 기반합니다.1vh는 viewport의 전체 높이의 1%를 의미합니다. 예를 들어, 뷰포트 높이가 1000px라면, 1vh는 10px입니다. 사파리나 크롬같은 경우 주소 표시줄을 감췄을 때를 기준으로 설정되었기 때문에 100vh를 설정했지만 스크롤되는 현상이 발생했습니..