我正在尝试使用 Nextjs 和 typescript 制作 404 页面。以下是截图:
这是我的代码...
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
interface Props {}
const ErrorPage: React.FC<Props> = ({}) => {
const router = useRouter();
return (
<>
<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
<svg
className="p-6 lg:p-48 fill-current text-gray-300"
viewBox="0 0 445 202"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
// viewBox="0 0 24 24"
>
<path
d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
fillRule="nonzero"
/>
</svg>
</div>
<div className="h-screen w-screen flex justify-center items-center relative z-10">
<div className="p-6 text-center">
<h2 className="uppercase text-xl lg:text-5xl font-black">
We are sorry, Page not found!
</h2>
<p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
The page you are looking for might have been removed had its name
changed or is temporarily unavailable.
</p>
<div className="text-center">
<Link href="/">
<a
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Back To Homepage
</a>
</Link>
<button
onClick={() => router.back()}
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Go Back
</button>
</div>
</div>
</div>
</>
);
};
export default ErrorPage;
出现这种情况是因为h屏和w屏还是flex有问题?但如果我不使用它们,我就不会按照我的预期将一个 div 放在另一个 div 之上(绝对)。我可能看这段代码太久了,我迷失在太空中。 那么,我在这里做错了什么?谢谢。
这是因为 w-screen 属性意味着“width: 100vw”(具有此类属性的元素应该水平消耗整个可用的设备屏幕空间)。
由于页面主体 () 上有一个垂直滚动条(因为主体的高度可能大于屏幕高度 (= 100vh)),因此您的水平空间将始终小于 100vw,因为水平空间也被消耗通过垂直滚动条。
这不是与 TailwindCSS 相关的问题,而是与 CSS 相关的错误。
垂直滚动条的宽度通常约为 12 px,但在操作系统和屏幕尺寸之间有所不同。
我认为更好的是,如果 CSS 考虑滚动条宽度来计算 100vw 属性的可用屏幕宽度,例如 100vw = 实际屏幕宽度 - (vertical 滚动条的width,如果存在)。
这是因为 w-screen 属性意味着“width: 100vw”(具有此类属性的元素应该水平消耗整个可用的设备屏幕空间)。
由于页面主体 () 上有垂直滚动条(因为主体的宽度可能大于屏幕宽度 (= 100vw)),所以垂直空间将始终小于 100vh,因为垂直空间也被消耗通过水平滚动条。
水平滚动条的宽度通常约为 12 px,但在操作系统和屏幕尺寸之间有所不同。
对于这种情况,CSS 可以计算 100vh 值的属性,例如 100vh = 实际屏幕高度 - (水平滚动条的高度,如果存在)。
现在可以做什么:
你最好使用 width: 100% 和 height: 100% 属性而不是 width: 100vw 和 height: 100vh
使用 vh 和 vw 值总是有风险的。你为什么需要那个?从语义上讲,孩子应该总是比父母小。
这与使用“overflow-x:hidden”隐藏溢出问题是同样丑陋的解决方法。
所以你的代码应该是这样的:
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
interface Props {}
const ErrorPage: React.FC<Props> = ({}) => {
const router = useRouter();
return (
<>
<div className="bg-gray-900 h-full w-full flex justify-center items-center absolute z-0">
<svg
className="p-6 lg:p-48 fill-current text-gray-300"
viewBox="0 0 445 202"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
// viewBox="0 0 24 24"
>
<path
d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
fillRule="nonzero"
/>
</svg>
</div>
<div className="h-full w-full flex justify-center items-center relative z-10">
<div className="p-6 text-center">
<h2 className="uppercase text-xl lg:text-5xl font-black">
We are sorry, Page not found!
</h2>
<p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
The page you are looking for might have been removed had its name
changed or is temporarily unavailable.
</p>
<div className="text-center">
<Link href="/">
<a
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Back To Homepage
</a>
</Link>
<button
onClick={() => router.back()}
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Go Back
</button>
</div>
</div>
</div>
</>
);
};
export default ErrorPage;
h-full and w-full
而不是 h-screen and w-screen
。另外,在您的具体情况下,这行代码很可能破坏了一切:
<div className="h-screen w-screen flex justify-center items-center relative z-10">
因为您已经将其应用于父元素:
<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
您的代码在语义上都是错误的。这是一个丑陋的解决方法。
您尚未提供 tailwind.config.js,因此演示中的一些颜色由于缺少自定义 TailwidnCSS 类名称值而丢失。
但这基本上是相同的代码,除了将所有 -screen 属性替换为 -full 并删除 svg 的底部填充,因为在大多数屏幕上,svg 的间距太大,然后消耗 >100vh 的空间屏幕并没有位于垂直中心,而是在页面底部有星形空白。
我建议有一个
parent relative
div
<div class="h-screen w-screen relative">
<!-- 404 -->
<div class="bg-gray-900 flex justify-center items-center absolute inset-0 z-0"> // inset-0 is important
<svg></svg>
</div>
<!-- content -->
<div class="flex justify-center items-center absolute inset-0 z-10">
</div>
</div>
在这里遇到了类似的问题 - 特别是当使用我没有从头开始设置的预制顺风模板时。我通过简单地将所有
h-screen
和 w-screen
分别替换为 h-full
和 w-full
来修复我的问题。