[CSS/Javascript/React] iOS환경 safari/chrome 브라우저에서 height 100% 안 먹히는 오류 해결

 

결국 완전히 CSS만으로 해결이 안되었고,

1. Javascript로 style에 새로운 변수를 만들어 디바이스의 세로길이인 window.innerHeight 값을 넣어 보내준 후

2. css에서 해당 값을 가지고 height 값을 정의해주어야 한다.

 

1. App.js

const App = () => {
	
        const handleResize = () => {
		const vh = window.innerHeight * 0.01;
		document.documentElement.style.setProperty("--vh", `${vh}px`); 
	};
    
	useEffect(() => {
		handleResize();
		window.addEventListener("resize", handleResize);
		return () => window.removeEventListener("resize", handleResize);
	}, []);
    
	return (
		<div className="App"></div>
	);
}

export default App;

 

2. .css

.App {
	height: 100vh;
    height: calc(var(--vh) * 100);
}