ReactJS 和 Tailwind CSS - 使用 h-screen 过度滚动

Question

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

我可以这样做，但是，我的页脚在底部，但我必须再滚动一点才能看到它。

我已将我的 Hero 设置为具有 h-screen 的类名来填充屏幕。即使没有 Footer 组件，我的主页仍然有轻微的滚动。

无论如何，我可以停止它并使它只有一个尺寸而没有滚动以适合屏幕吗？

我的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 TO WHATS HAPPENING

Answer 1

这是弹性布局的简单使用。 flex-1 是你的 friend 。无论设备高度如何，这项工作都非常出色。不再滚动。 checkout working modal

<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>