ReactJS 和 Tailwind CSS - h-screen 的过度滚动

Question

我正在构建我的个人网站，我只想显示Navbar、Hero和Footer组件。

我可以做到这一点，但是，我的页脚位于底部，但我必须进一步滚动才能看到它。

我已将Heroh-screen 的 className 设置为填满屏幕。即使没有页脚组件，我的主页仍然有轻微的滚动。

不管怎样，我可以阻止这个，让它只有一种尺寸，没有滚动来适应屏幕？

我的Footer.js

import React from "react";
import { FaGithub } from "react-icons/fa";
import { Link } from "react-router-dom";

const Footer = () => {
  return (
    <div className="bg-transparent flex justify-center items-center h-16 bg-transparent text-gray-500">
      (c) 2021 Callum Lees - All rights reserved.{" "}
      <Link to={{ pathname: "https://github.com/" }} target="_blank">
        <FaGithub className="ml-4 hover:text-blue-300" />
      </Link>
    </div>
  );
};

export default Footer;

我的Hero.js组件

import React from "react";
import { Link } from "react-router-dom";

const Hero = () => {
  return (
    <div className="flex flex-col min-h-screen justify-center items-center overflow-auto relative mb-auto">
      {/* items-center */}
      <h1 className="lg:text-6xl md:text-7xl sm:text-6xl text-7xl pl-8 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-500 font-black mb-7 ml-24 mr-24">
        <h1 className="lg:text-4xl md:text-5xl sm:text-4xl text-5xl font-normal text-gray-800">
          Hi,
        </h1>
        {/*bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-500    */}
        I'm Callum.
      </h1>
      <Link
        to="/projects"
        className="py-3 px-5 text-sm text-gray-700 transition duration-300 ease-in-out flex items-center lg:text-xl md:text-base sm:text-sm"
      >
        ALL PROJECTS
        <svg
          className="w-6 h-6 ml-4 animate-bounce text-blue-500"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M14 5l7 7m0 0l-7 7m7-7H3"
          />
        </svg>
      </Link>
    </div>
  );
};

export default Hero;

我的Navbar.js组件

import React from "react";
import { Link } from "react-router-dom";

const Navbar = ({ toggle }) => {
  return (
    <nav
      className="flex justify-between items-center h-16 bg-transparent text-black font-sans"
      role="navigation"
    >
      <Link
        to="/"
        className="pl-8 font-black hover:text-blue-600 flex items-center"
      >
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
          />
        </svg>
        C-L
      </Link>
      <div className="pr-8 cursor-pointer md:hidden" onClick={toggle}>
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M4 8h16M4 16h16"
          />
        </svg>
      </div>
      <div className="pr-8 md:block hidden">
        <Link className="p-4 hover:text-blue-600" to="/">
          Home
        </Link>
        <Link className="p-4 hover:text-blue-600" to="/projects">
          Projects
        </Link>
        <Link className="p-4 hover:text-blue-600" to="/contact">
          Contact
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

GIF 展示正在发生的事情

Answer 1

这是flex布局的简单使用。flex-1是你的朋友吗？无论设备高度如何，这项工作都非常出色。不再滚动。检查工作模式

<div class="flex flex-col h-screen">
  <div class="flex bg-red-100">Header</div>
  <div class="flex flex-1 bg-gray-100">Body</div>
  <div class="flex bg-blue-100">Footer</div>
</div>