모바일에서 100vh 오류 해결방법

publisher.kim 2024. 4. 19. 15:48

1. 새로운 단위 사용하기

https://s0ojin.tistory.com/56

[React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법

문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이

s0ojin.tistory.com

여기서 해결방법 2 참고.

+ 해결방법 2의 단위에 대한 내용 :

2022년 CSS 현황 | Blog | web.dev

Google IO 2022에서 확인할 수 있는 현재와 미래의 웹 스타일 지정 기능 및 몇 가지 추가 사항

web.dev

2. javascript로 설정하기

https://triplexlab.tistory.com/116

모바일 웹 앱에서 100vh이 가진 세로 사이즈 문제

📱 모바일 웹 앱에서 100vh이 가진 문제(윈도우창 리사이즈) 안녕하세요 TriplexLab 입니다. 오늘은 모바일 웹 앱에서 100vh이 가진 문제에 대해서 살펴보도록 하겠습니다. 이 글은 아래 글들을 참고

triplexlab.tistory.com

728x90