시작하며,
화면 전체 페이지를 스크롤 없이 꽉 채워야하는 상황이 생겼다
상단바와 하단nav바가 있어, height: calc(100vh - {상단바+하단nav바 높이값}px)로 고정해주었다
그러나 막상 배포하고보니, 모바일 사파리에서는 url 주소창 때문에 고정된 height값임에도 화면이 길어지면서 스크롤이 생기는 현상이 발생했다
많은 레이아웃을 변경하지 않고 간단하게 해결할 수 있을 것 같아서 열심히 구글링을 해보았다
vh? svh!
기존에는 100vh가 실제로 보여지는 가장 큰 높이였다 (본인은 그렇게 알고 있었다)
그러나 100vh에서는 url 주소창이 고려되지 않는다
표준이 작고 큰 동적 뷰포트 단위로 향상되었다고 한다
svh; small viewport height
svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져온다
url 주소창이 없어져도 기존 url 주소창의 높이 값을 뺀 나머지 값을 가져온다
lvh; large viewport height
lvh는 svh와는 반대로 사용자 화면 기준으로 가장 긴 뷰표트 값을 가져온다
url 주소창이 있더라도 url 주소창이 없을 때의 총 화면의 길이를 가져온다
본인이 필요한 건, url 주소창이 있을 때 url 주소창의 높이 값을 뺀 나머지 값이다
따라서 svh로 해결했다
height: calc(100svh - {상단바+하단nav바 높이값}px)참고 사이트
모바일에서 브라우저 주소창을 고려한 css height 설정 - svh
새로운 뷰포트 단위로 반응형 디자인을 개선하는 방법 | flaming.code
마치며,
css를 다루면서 높이를 다루는 게 은근 번거로웠는데, svh, lvh는 꽤 유용하게 쓸 것 같다
디자인하는 개발자