diff --git a/app/layout.tsx b/app/layout.tsx index 654a725..48d8060 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -8,6 +8,11 @@ import StyledComponentsRegistry from '../lib/registry'; import Script from 'next/script'; import { Main } from '../components/common/main'; +const upadteScreenHeight = () => { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty("--vh", `${vh}px`); +} + export default function RootLayout({ children, }: { @@ -19,6 +24,11 @@ export default function RootLayout({ } }, []); + useEffect(() => { + upadteScreenHeight(); + window.addEventListener('resize', () => upadteScreenHeight()); + }, []); + return ( diff --git a/app/meister/page.tsx b/app/meister/page.tsx index 1c10165..e3749df 100644 --- a/app/meister/page.tsx +++ b/app/meister/page.tsx @@ -100,7 +100,7 @@ const MeisterPage = () => { return (
<> - +
{ e.preventDefault(); diff --git a/styles/globals.css b/styles/globals.css index 910aae9..faee9a8 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -120,21 +120,21 @@ body.dark { --background: var(--level-0); } -html, body { - width: 100%; - height: 100%; +:root { + --vh: 100% } html { /* 1rem == 10px */ --scale: 62.5%; font-size: var(--scale); - height: 100%; + height: calc(var(--vh) * 100); scroll-behavior: smooth; scroll-snap-type: y proximity; } body { + height: 100%; background-color: var(--background); color: var(--text); font-size: 1.5rem; @@ -152,7 +152,7 @@ body { grid-template-rows: auto 1fr auto; grid-template-columns: auto 1fr; width: 100%; - height: calc(1vh * 100); + height: 100%; } main { diff --git a/styles/meister/index.module.css b/styles/meister/index.module.css index 149e7c0..a6c7a1e 100644 --- a/styles/meister/index.module.css +++ b/styles/meister/index.module.css @@ -1,5 +1,5 @@ .form { - margin-top: 10rem; + margin-top: 15rem; } .result {