반응형
[ 문제점 ]
일반적으로 css 에서 100vh를 사용하면 데스크탑에서는 문제가 되지 않는다. 그냥 창 전체 크기로 알아서 맞추어 주지만, 모바일에서는 url 주소창이 있기 때문에 문제가 생긴다. 주소창의 형태와 크기는 safari, chrome 에 따라 다르고, 버전에 따라서도 다르기 때문에 각각의 경우를 나누어서 계산하기는 힘들다.
[ 해결 방법 ]
찾아보니 CSS에서
height: -webkit-fill-available;
height: fill-acaiable;
이런저런 속성들이 있다고 했다. 그래서 적용시켜보니 safari에서는 돌아가는데 chrome에서는 또 적용이 안되는 오류가 있었다. 그래서 chrome에서는 또 따로 분기를 나누어서 처리하고 하려고 하다가 다음과 같은 방법을 발견하고 해결하였다.
window의 innerHeight를 js에서 구하고, 이를 css의 property로 정의하여서 css에서도 사용할 수 있게하는 방법이다.
const [heightSize, setHeightSize] = useState<number>(0);
useEffect(() => {
const handleResize = () => {
setHeightSize(window.innerHeight);
};
handleResize();
window.addEventListener("resize", handleResize);
const root = document.documentElement;
root.style.setProperty("--1000vh", `${heightSize}px`);
return () => window.removeEventListener("resize", handleResize);
}, [heightSize]);
위 코드를 react나 Nextjs의 index 부분에 적용하면 CSS 에서 var(--100vh)로 사용할 수 있게된다. 위 방법대로 하면 scss의 calc도 다음과 같이 사용할 수 있다.
min-height: var(--100vh);
height: calc(var(--100vh) - 50px);
반응형
'Front-End > CSS' 카테고리의 다른 글
[CSS] width에 padding, margin 포함시키기 (0) | 2022.08.03 |
---|---|
[CSS] 가로, 세로 스크롤 없애기 (0) | 2022.07.28 |
[CSS] Font property font-family does not have generic default 해결 (0) | 2022.02.23 |
[CSS][웹 폰트] google font, 눈누 적용하기 (3) | 2021.07.17 |
[CSS] CSS적용 안되는 경우, 크롬 강력 새로 고침 (1) | 2021.07.10 |
댓글