css height 100vh 스마트폰 가로모드 적용이 안될 때

반응형 웹페이지는 여러모로 신경써야 할 게 많다..

웹페이지 모드만 봤을 때 height:100vh; 는 아무런 문제가 되지 않았다.

그런데 스마트폰 모드로 보다가 한페이지에만 배경화면을 적용 시킨 뒤 가로모드로 했을 때 스크롤 안해도 되는 윗 부분까지만 배경화면이 적용 된 것을 확인할 수 있었다. 태블릿에서도 발생 확인 완료..!

구글링해서 이것 저것 적용해 보다가 해결방법을 알아냄!

.contact-body {
  position: relative;
  height: 100%;
  width: 100%;
}

position: fixed;로 하면 배경화면 자체는 적용이 잘 되었지만 스크롤이 안되기 때문에 쓸 수 없다.

스마트폰 사이즈에서만 문제가 되기 때문에 웹페이지용은 그대로 100vh를 냅두고 @media screen and (max-width: ???px){} 안에서 이렇게 설정해 주면 된다. 이렇게 안해주면 또 웹페이지크기에서 문제 발생 ㅎㅎ

이렇게 해서 간단히 해결 완료..!