我正在学习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>
);
}所有的帮助是赞赏，谢谢！
2条答案
按热度按时间pkmbmrz71#
问题是about部分的
h-full和w-full占用了100vh和100vw，因为父节点有h-screen和w-screen，但导航栏有自己的高度和宽度，这会使导航栏溢出，因为内容比viewport大。如果你想让about部分占据整个窗口大小，我认为sticky不是正确的调用。如果你想滚动并让元素随之移动，Sticky更常用。但是如果意图是使“关于”部分是页面的全尺寸。我会把
flex和flex-col放在主元素上，让about部分有flex-1，并删除w-full和h-full类，因此它占用可用空间而不是父节点的大小。ttygqcqt2#
问题是导航栏设置为sticky，而About页面上也有容器类，这会导致溢出。您可以使用的一个选项是将导航栏上的sticky类替换为fixed并添加w-full类，fixed position与sticky position不同，它将元素从文档流中删除，允许About页面占用空间。这会带来About页面和导航栏内容重叠的问题，您可以通过添加导航栏的高度作为about容器的顶部填充来解决这个问题。代码如下