fix(project): implement calculating 100vh correctly

jwplayer · Jun 23, 2021 · 2e09110 · 2e09110
1 parent f190c28
commit 2e09110
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
@@ -4,7 +4,8 @@
 .layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
 }
 .main {
   flex: 1;

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, FC, useState, useContext } from 'react';
+import React, { ReactNode, FC, useState, useContext, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
@@ -29,6 +29,15 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   const hasDynamicBlur = options.dynamicBlur === true;
   const banner = assets.banner;
 
+  useEffect(() => {
+    const calculateViewHeight = () => document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
+
+    calculateViewHeight();
+    window.addEventListener('resize', () => calculateViewHeight);
+
+    return () => document.removeEventListener('resize', calculateViewHeight);
+  }, []);
+
   return (
     <div className={styles.layout}>
       <Helmet>