ReactJS和尾风CSS -h屏幕超量滚动

Question

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

我可以做到这一点，然而，我的脚在底部，但我必须滚动更远一点，以看到它。

我已经将我的Hero设置为有一个h屏幕的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>