mobile 100vh

모바일에서는 url 주소 창, 네비게이션 바의 높이를 뷰 포트(스크린)높이에 포함 시켜 pc에서처럼 화면에 꽉 차지 않고 실제 화면보다 크게 잡혀서 스크롤이 생긴다.

 

window.innerHeight 로 현재 뷰 포트 크기 가져와서 재정의 하기

 

next.js 에서는 최상위에 위치한 _app.js에서 적용하기

//_app.js

function setScreenSize() {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
}
useEffect(() => {
    setScreenSize();
});

 

css 적용하기

/* 필요한 곳에 적용 */
height: calc(var(--vh, 1vh) * 100);

 

tailwindCss 적용하기

setScreenSize() 적용 후 tailwind.config.js에서 스타일 지정한 후 h-real-screen , min-h-real-screen 사용하면 된다.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      height: {
        "real-screen": "calc(var(--vh) * 100)",
      },
    },
    minHeight: {
      "real-screen": "calc(var(--vh) * 100)",
    },
  },
  plugins: [],
};

 

만약 header 높이 값 빼야 된다면 real-screen": "calc(var(--vh) * 100 - 50px) 이렇게 100 뒤에 header 높이 값(50px) 빼면 된다.

 

 

참고

https://s0ojin.tistory.com/56