我正在学习Reaction和Tailwincss.我目前正试图建立一个简单的投资组合与首页和其他一些页面的导航栏.我已经为我的首页创建了框架,但当我添加导航栏(页眉)时,内容在高度和宽度上都比屏幕大,这在底部和右侧增加了空格.

我试过摆弄h-screen/w-screenh-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>
    );
  }

感谢大家的帮助,谢谢!

推荐答案

问题是,About部分中的h-fullw-full占据100vh100vw,因为父级拥有h-screenw-screen,但导航栏具有自身的高度和宽度,这会使其溢出,因为内容大于视区.

如果你想让关于部分占据整个窗口的大小,我认为粘性是不合适的.如果您想要滚动并使元素随之移动,则更常用粘滞,但如果您的意图是让About部分是页面的完整大小,则使用Sticky.我会将flexflex-col放在主元素上,并使About部分有flex-1个,并删除w-fullh-full个类,这样它就占用了可用的空间,而不是父元素的大小.

Javascript相关问答推荐

在TypScript中计算使用旋转谷仓的鸡舍所需的农场数量

单击树元素时阻止焦点事件触发?

React Hooks中useState的同步问题

有Angular 的material .未应用收件箱中的价值变化

按钮未放置在html dis位置

Cookie中未保存会话数据

类型自定义lazy Promise. all

Angular中计算信号和getter的区别

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

为什么我的列表直到下一次提交才更新值/onChange

如何在不创建新键的情况下动态更改 map 中的项目?

Html文件和客户端存储的相关问题,有没有可能?

如何在.NET Core中将chtml文件链接到Java脚本文件?

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

自定义图表工具提示以仅显示Y值

在渲染turbo流之后滚动到元素

P5JS-绘制不重叠的圆

JAVASCRIPT SWITCH CASE语句:当表达式为';ALL';

P5.js中矩形内的圆弧

是否设置以JavaScript为背景的画布元素?