diff --git a/src/pages/onboardingPage/OnboardingPage.tsx b/src/pages/onboardingPage/OnboardingPage.tsx
index f0672649..0c96cf4d 100644
--- a/src/pages/onboardingPage/OnboardingPage.tsx
+++ b/src/pages/onboardingPage/OnboardingPage.tsx
@@ -27,6 +27,20 @@ const OnboardingPage = () => {
 
   const { data, isLoading } = useGetNickname(userId);
   const [isInitialLoad, setIsInitialLoad] = useState<boolean>(true);
+  const setVh = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  };
+
+  useEffect(() => {
+    setVh();
+    window.addEventListener('resize', setVh);
+
+    return () => {
+      window.removeEventListener('resize', setVh);
+    };
+  }, []);
+
   useEffect(() => {
     if (isInitialLoad) {
       setSelections((prev) => ({
diff --git a/src/pages/onboardingPage/onboardingPage.css.ts b/src/pages/onboardingPage/onboardingPage.css.ts
index 4943e699..2d4f3185 100644
--- a/src/pages/onboardingPage/onboardingPage.css.ts
+++ b/src/pages/onboardingPage/onboardingPage.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 const container = style({
-  height: '100vh',
+  height: 'calc(var(--vh, 1vh) * 100)',
   display: 'grid',
   gridTemplateRows: 'auto 1fr',
 });