ios & android 100vh 오류 해결

#100vh 오류 해결

:root {
   --vh: 100%;
}
html,body,.main_box{
    height: 100vh;
    height: var(--vh);
}

let vh = 0;

useEffect(() => {
  vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}, []);

const setVh = () => {
  document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
};
window.addEventListener('resize', setVh);
setVh();

 

 

리사이징시와 ios에서 주소창에 가려지는 부분을 해결 가능함

.main_box는 html,body 밑 전체를 감싸는 박스 태그이다.

 

+안드로이드 소프트 키로 인한 오류 발견!(js 없이 css로만으로도 버그 수정가능)

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
#body 아래 감싸고 있는 최상의 태그{
	width:100%;
	height:100%;
	position:fixed;
	overflow:hidden;	
}