我正在学习React和TailwindCSS。我目前正试图建立一个简单的投资组合与首页和其他一些页面导航栏。我已经为我的首页创建了骨架，但是当我添加导航栏(标题)时，内容在高度和宽度上都比屏幕大，这在底部和右侧添加了空白。
我试着搞乱h-screen/w-screen和h-full/w-full标签，但我无法使任何工作。
我的App.js是这样的:
import React from "react";
import About from "./components/About";
import Navbar from "./components/Navbar";
export default function App() {
return (
<main className="m-0 w-screen h-screen bg-gray-50 body-font text-gray-600 font-display">
{/* <Navbar /> <-- Adding this causes the issue */}
<About />
</main>
);
}
我的Navbar.js组件看起来像这样:
import React from "react";
export default function Navbar() {
return (
<header className="bg-gray-50 md:sticky top-0 z-10">
<div className="container mx-auto flex p-5 flex-col items-end">
<nav className="md:mr-4 md:py-1 md:pl-4 flex flex-wrap items-center text-base justify-center">
<a href="#projects" className="mr-5 hover:text-blue-500">
Past Work
</a>
<a href="#skills" className="mr-5 hover:text-blue-500">
Skills
</a>
<a href="#testimonials" className="mr-5 hover:text-blue-500">
Testimonials
</a>
</nav>
</div>
</header>
);
}
我的首页(About.js)看起来像这样:
import React from "react";
export default function About() {
return (
<section id="about" className="h-full w-full">
<div className="container h-full w-full mx-auto my-auto flex px-10 py-20 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-5xl text-4xl mb-4 font-extrabold text-blue-500">
NAME HERE
</h1>
<p className="mb-8 leading-relaxed">
Developer
</p>
<div className="flex flex-col justify-center">
<a href="mailto:mail@xxx.xxx">mail@xxx.xxx</a>
</div>
</div>
</div>
</section>
);
}
所有的帮助是感激，谢谢!
问题是，h-full和w-full在about部分占用100vh和100vw，因为父节点有h-screen和w-screen，但导航栏本身有一个高度和宽度，这会使它溢出，因为内容比视窗大。
flex和flex-col放在主元素上，并使about部分有flex-1，并删除w-full和h-full类，所以它占用了可用空间，而不是父元素的大小。
问题是您将导航栏设置为粘着，并且About页面上也有容器类，这会导致溢出。您可以使用的一个选项是将导航栏上的粘贴类替换为fixed并添加w-full类，固定位置与粘贴位置不同，它从文档流中删除元素，允许About页面占用空间。这带来了About页面和导航条内容重叠的问题，您可以通过在About容器上添加导航条的高度作为顶部填充来解决这个问题。下面是代码
export default function Navbar() {
return (
<header className="top-0 z-10 w-full bg-gray-50 md:fixed">
<div className="container mx-auto flex flex-col items-end p-5">
<nav className="flex flex-wrap items-center justify-center text-base md:mr-4 md:py-1 md:pl-4">
<a href="#projects" className="mr-5 hover:text-blue-500">
Past Work
</a>
<a href="#skills" className="mr-5 hover:text-blue-500">
Skills
</a>
<a href="#testimonials" className="mr-5 hover:text-blue-500">
Testimonials
</a>
</nav>
</div>
</header>
);
}
export default function About() {
return (
<section id="about" className="h-full w-full pt-[72px]">
<div className="container mx-auto my-auto flex h-full w-full flex-col items-center px-10 py-20 md:flex-row">
<div className="mb-16 flex flex-col items-center text-center md:mb-0 md:w-1/2 md:items-start md:pr-16 md:text-left lg:flex-grow lg:pr-24">
<h1 className="title-font mb-4 text-4xl font-extrabold text-blue-500 sm:text-5xl">
NAME HERE
</h1>
<p className="mb-8 leading-relaxed">Developer</p>
<div className="flex flex-col justify-center">
<a href="mailto:mail@xxx.xxx">mail@xxx.xxx</a>
</div>
</div>
</div>
</section>
);
}