fix: fix body height

This commit is contained in:
fantasticit 2022-04-25 23:22:57 +08:00
parent 180eec9c19
commit c932af5d0a
3 changed files with 8 additions and 30 deletions

View File

@ -1,16 +0,0 @@
import { useEffect } from 'react';
export function useSafari100vh() {
useEffect(() => {
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height', `${window.innerHeight}px`);
};
window.addEventListener('resize', appHeight);
appHeight();
return () => {
window.removeEventListener('resize', appHeight);
};
}, []);
}

View File

@ -1,13 +1,11 @@
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { useSafari100vh } from 'hooks/use-safari-100vh';
import { useTheme } from 'hooks/use-theme';
import 'viewerjs/dist/viewer.css';
import 'styles/globals.scss';
import 'tiptap/styles/index.scss';
function MyApp({ Component, pageProps }: AppProps) {
useSafari100vh();
useTheme();
return (

View File

@ -5,8 +5,9 @@
box-sizing: border-box;
}
html,
body {
body,
html {
height: 100%; /* Fill the window */
padding: 0;
margin: 0;
}
@ -16,13 +17,8 @@ html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
height: 100vh;
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
height: var(--app-height);
line-height: 1.5;
text-rendering: optimizespeed;
margin: 0;
/* stylelint-disable-next-line selector-id-pattern */
> div#__next {
@ -84,8 +80,8 @@ select {
*,
*::before,
*::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
@ -98,8 +94,8 @@ select {
::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: .5rem;
transition: all .2s;
border-radius: 0.5rem;
transition: all 0.2s;
}
*:hover {