# 100vh
Safari 100vh 이슈
문제 상황 퍼블을 하다보면 화면을 가득 채우거나, 밑부분쪽에 콘텐츠를 채워야 하는 경우가 생긴다. 이번에 나는 Bottom Sheet를 구현해야 하는 상황이었다. 그럴 경우 100vh를 사용해서 처리를 하게 되는데,, 이것이 모바일로 가면 다음과 같은 문제가 생긴다. 크롬에서는 딱 붙어서 나오는데, 사파리에서는 저 미친 도구 영역에 가려서 보이지 않는다. 이게 왜 그런가 확인해봤더니,, 사파리는 100vh 기준이 저 URL 영역까지 포함하는 것이었다. (그 아래 도구툴 영역은 포함X) 
모바일 브라우저에서 100vh가 왜 안 돼!!!! 🤯
프로젝트 에코노삡을 배포하며 특이한 이슈를 발견했다. > 모바일 브라우저 100vh가 내가 생각한 대로 작동하지 않았다... 🥹🔫 로딩 후 첫 화면에서는 100vh가 화면에 벗어났고, 아래로 스크롤 시에 하단의 툴바가 사라지며 100vh가 화면에 꽉 찼다. vh, vw는 데스크탑에서는 잘 작동하는데, 왜 모바일 브라우저에서는 아닐까? 모바일 기기에서는 동적 툴바(주소, 탭)의 유무에 따라 뷰포트 크기가 영향을 받는다. 뷰표트 크기는 변경될 수 있지만 vh, vw 크기는 변경되지 않기 때문에, 높이가 100vh인 요소는 뷰포트에 다 담기지 않는다. 배포하지 않았다면 몰랐을 이슈!! 해결 방법을 찾아보았다. -webkit-fill-available css 몇 줄로
css height 100vh 스마트폰 가로모드 적용이 안될 때
반응형 웹페이지는 여러모로 신경써야 할 게 많다.. 웹페이지 모드만 봤을 때 height:100vh; 는 아무런 문제가 되지 않았다. 그런데 스마트폰 모드로 보다가 한페이지에만 배경화면을 적용 시킨 뒤 가로모드로 했을 때 스크롤 안해도 되는 윗 부분까지만 배경화면이 적용 된 것을 확인할 수 있었다. 태블릿에서도 발생 확인 완료..! 구글링해서 이것 저것 적용해 보다가 해결방법을 알아냄! position: fixed;로 하면 배경화면 자체는 적용이 잘 되었지만 스크롤이 안되기 때문에 쓸 수 없다. 스마트폰 사이즈에서만 문제가 되기 때문에 웹페이지용은 그대로 100vh를 냅두고 @media screen and (max-width: ???px){} 안에서 이렇게 설정해 주면 된다. 이렇게 안해주면 또 웹페이지크기에서 문제 발생 ㅎㅎ 이렇게 해서 간단히 해결 완료..!
[Web] 모바일 브라우저에서 100vh 적용하기
모바일에서 100vh의 문제점 모바일 브라우저에서 100vh를 적용하려고 하면 내가 의도했던 대로 절대 되지 않는다. 왜냐하면 모바일 브라우저에서 100vh는 브라우저 상단 주소창 영역과 하단 네비게이션 바 영역을 포함하기 때문이다. 그래서 100vh로 설정하면 모바일 화면에서는 내가 원래 보여주려고 했던 부분이 가려지는 현상이 발생하는 것이다. 해결 방법 조사 구글링 구글링 해보면 자바스크립트로 vh를 선언해서 막 복잡하게 하거나, CSS의 -webkit-fill-available 속성을 사용하거나 등등...을 하는데 다 필요 없고 지금 밑의 방법으로 하면 된다. (심지어 height: -webkit-fill-available;로 설정하면 나중에 calc() 함수로 뭘
최상위 태그에서 가운데 정렬을 하고 싶다면?
height를 100vh로 지정하면 viewport를 기준으로 작동하기 때문에 가운데에 올 수있다! height : 100% 와는 다르다! 100%는 상위태그 높이 기준으로 보이기 때문에 달라질 수 있다
height: 100% vs height: 100vh
1. height: 100% > height: 100%의 기준은 부모 엘리먼트! html css .box를 감싸고 있는 .wrap의 높이를 임의로 3000px로 설정하였다. 이 때 div.box height:100% 로 설정하면 .box의 부모 .wrap의 높이인 3000px만큼 .box의 높이가 설정된다. 2. height: 100vh > height: 100vh의 기준은 브라우저 창 크기! css 위와 동일한 html, css를 작성하고 .box의 height만 100vh로 변경하였다. 여전히 부모인 .wrap의 높이가 3000px이지만 .box는 브라우저의 높이와 동일한 높이값을 가진다. 
ios safari height 100vh 문제를 해결해봅시다
사연 사내 프로젝트를 개발도중에 모바일에서 height를 100vh로 설정해서 화면을 구성하는 작업이 있었는데, ios safari에서는 100vh로 잡았을때 하단의 주소표시줄까지 포함이 되어서 최하단에 존재하는 요소는 가려지는 현상이 발생했다. 해결 화면이 렌더링 되는 시점에 window.innerHeight를 setProperty로 변수에 할당해서 css에서 사용하는 방식으로 해결할 수 있었다. height 667px 디바이스일때 --app-height 변수에 window.innerHeight값을 설정하면 style
[react] iOS에서 100vh에 스크롤이 생기는 문제
개발자도구를 이용해 모바일 화면을 확인하며 작업을 해도, 모바일 기기로 직접 확인하면 기획과 다르게 구현된 문제가 많이 발생한다. 대표적으로 화면의 height 를 100vh 로 설정했을 때 iOS 등의 기기에서 확인해보면 스크롤이 생겨있다. 이유는 100vh 가 쓸 수 없는 영역(주소창 등)까지 포함한 값이기 때문이다. 1. CSS Custom Property 이용 https://dmstjq92.medium.com/모바일-ios-safari-chrome-에서-100vh-스크롤-생기는-문제-종결-682c5e9d068d 위 레퍼런스에서 발견한 방법으로, layout.tsx 에 해당 코드를 작성한다. 실제로 사용할 때는 css에서 위와 같이 사용하면 된다. 이 방식은 calc를 사용할 수 있어 아주 유용하다. 2. -webkit-fill-available calc 를 사용할 필요 없이 무조건 100vh 만 필요한 상황이라면, 간단하게 `-
모바일 100vh 하단 가려지는 현상 해결
모바일 마크업을 할 때 디바이스 크기에 상관없이 한 화면을 꽉 채우기 위해 height:100vh 를 사용하곤 한다. 그런데 100vh를 사용하고 실제 모바일 브라우저에서 확인해보면 아래 부분이 잘려보인다. 위 이미지는 div.wrap에 height:100vh를 주고 그 안에 section 4개를 각각 height:25%를 준 후 모바일 브라우저(iOS safari)에서 캡쳐한 화면이다. 하단 내비게이션 바 때문에 마지막 4번째 section이 가려진다. 이러한 현상을 해결하려면 100vh로 보여주고 싶은 요소의 height값을 window의 innerHeight 값으로 주면 된다. 위와 같이 스크립트로 height값을 주면 아래 캡쳐이미지와 같이 내비게이션 바 윗부분까지를 채우게 된다.