100vh問題を解決

chakkun1121 · Jan 24, 2024 · 270442c · 270442c
1 parent 3732ea4
commit 270442c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 15 deletions.
diff --git a/app/(app)/app/_components/leftBar.tsx b/app/(app)/app/_components/leftBar.tsx
@@ -20,8 +20,8 @@ export default function LeftBar() {
     <>
       <div
         className={`${
-          isShow ? "w-[min(24rem,calc(theme(width.screen)-3rem))]" : "w-0"
-        } bg-JungleGreen-100 duration-500 fixed top-20 h-[calc(100dvh-5rem)] z-10`}
+          isShow ? "w-[min(24rem,calc(100vw-3rem))]" : "w-0"
+        } bg-JungleGreen-100 duration-500 fixed top-20 h-[calc(100vh-5rem)] z-10`}
       >
         <RecentFile hidden={!isShowContent} />
       </div>
@@ -31,7 +31,7 @@ export default function LeftBar() {
         }}
         className={`bottom-2 fixed w-12 h-12 bg-JungleGreen-200 duration-500 z-20 ${
           isShow
-            ? "rounded-l-full left-[min(21rem,calc(theme(width.screen)-3rem))]"
+            ? "rounded-l-full left-[min(21rem,calc(100vw-3rem))]"
             : "rounded-r-full left-0"
         }`}
       >
@@ -43,9 +43,7 @@ export default function LeftBar() {
       </button>
       <div
         className={`${
-          isShow
-            ? "md:w-[min(24rem,calc(theme(width.screen)-3rem))] w-0"
-            : "w-0"
+          isShow ? "md:w-[min(24rem,calc(100vw-3rem))] w-0" : "w-0"
         } duration-500`}
       />
     </>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -77,15 +77,6 @@ module.exports = {
       },
     },
     extend: {
-      height: {
-        screen: ["100vh", "100dvh"],
-      },
-      minHeight: {
-        screen: ["100vh", "100dvh"],
-      },
-      maxHeight: {
-        screen: ["100vh", "100dvh"],
-      },
       gridTemplateColumns: {
         auto: "repeat(auto-fit, minmax(0, 1fr))",
       },