safari 100vh issue (1) 썸네일형 리스트형 [Javascript] 모바일 safari, 삼성 브라우저 100vh 이슈 해결 PC에서는 문제없던 레이아웃이 ios safari나 안드로이드 삼성 브라우저로 열어봤더니 쓸데없는 스크롤이 생기거나 하단에 배치한 버튼이 브라우저 네비게이션 바 또는 url 창에 가리는 문제가 발생했다. 이는 url 바와 브라우저 네비게이션 영역도 포함하여 화면의 뷰포트를 계산하기 때문에 발생하는 현상이다. 더구나 url 바는 보여지기도 하고 사라지는 경우도 있는데 100vh는 이를 고려하지 못한다. 그럼, 어떻게 해결하면 될까? 실제 우리가 생각하는 화면의 높이의 1vh를 구해 전체 높이를 100vh로 선언해주면 된다! 물론 화면 크기가 변할 때마다 다시 1vh를 계산해야하는 것도 잊어서는 안된다. 제일 먼저 vh를 계산하고 document 스타일에 --vh라는 프로퍼티에 할당하는 함수를 만들어준다. .. 이전 1 다음
