Tailwind CSS 不必要的空白

Question

我正在尝试使用在 tailwind 工具箱中找到的这个管理入门模板，并尝试根据自己的喜好对其进行自定义。 我已将模板中的代码拆分为 3 个单独的文件，如下所示，当我将主文件中的children变量替换为类似test我会在页面底部得到一个带有大量额外空白的滚动条，如图所示

'Main' 文件导入导航栏和侧边栏，然后还有一个主页面内容的占位符

import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"

export default function Main({ name, children }) {

  return (
    <div className="bg-gray-800 flex flex-col h-screen">

      <Navbar />

      <div className="flex flex-col md:flex-row flex-grow">

        <Sidebar />

        <div className="flex-1 bg-gray-100">
          <div className="bg-gray-800 pt-3">
            <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
              <h3 className="font-bold pl-2">{name}</h3>
            </div>
          </div>
          <div className="p-4">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}

导航栏

import { useState } from "react";

export default function Navbar() {
  const [dropdownState, setDropdownState] = useState('invisible');

  const toggleDropdown = () => {
    console.log('toggle');
    if (dropdownState) {
      setDropdownState(null);
    } else {
      setDropdownState('invisible')
    }
  }

  return (
    < nav className="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto sticky w-full z-20 top-0" >

      <div className="flex flex-wrap items-center">
        <div className="flex flex-shrink md:w-1/3 justify-center md:justify-start text-white">
          <a href="#">
            <span className="text-xl pl-2"><i className="em em-grinning"></i></span>
          </a>
        </div>

        <div className="flex flex-1 md:w-1/3 justify-center md:justify-start text-white px-2">
          <span className="relative w-full">
            <input type="search" placeholder="Search"
              className="w-full bg-gray-900 text-white transition border border-transparent focus:outline-none focus:border-gray-400 rounded py-3 px-2 pl-10 appearance-none leading-normal" />
            <div className="absolute search-icon" style={{ top: "1rem", left: ".8rem" }}>
              <svg className="fill-current pointer-events-none text-white w-4 h-4"
                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path
                  d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z">
                </path>
              </svg>
            </div>
          </span>
        </div>

        <div className="flex w-full pt-2 content-center justify-between md:w-1/3 md:justify-end">
          <ul className="list-reset flex justify-between flex-1 md:flex-none items-center">
            <li className="flex-1 md:flex-none md:mr-3">
              <a className="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
            </li>
            <li className="flex-1 md:flex-none md:mr-3">
              <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
                href="#">link</a>
            </li>
            <li className="flex-1 md:flex-none md:mr-3">
              <div className="relative inline-block">
                <button onClick={toggleDropdown} className="drop-button text-white focus:outline-none">
                  <span className="pr-2"><i className="em em-robot_face"></i></span> Hi, User <svg
                    className="h-3 fill-current inline" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20">
                    <path
                      d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                  </svg></button>
                <div id="myDropdown"
                  className={"dropdownlist absolute bg-gray-800 text-white right-0 mt-3 p-3 overflow-auto z-30 " + dropdownState}>
                  <a href="#"
                    className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
                      className="fa fa-user fa-fw"></i> Profile</a>
                  <a href="#"
                    className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
                      className="fa fa-cog fa-fw"></i> Settings</a>
                  <div className="border border-gray-800"></div>
                  <a href="#"
                    className="p-2 hover:bg-gray-800 text-white text-sm no-underline hover:no-underline block"><i
                      className="fas fa-sign-out-alt fa-fw"></i> Log Out</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav >
  )
}

和侧边栏

import { InertiaLink } from "@inertiajs/inertia-react"

export default function Sidebar() {
  const linkClass = (route) => {
    if (window.location.href.indexOf(route) !== -1) {
      return ' border-blue-600'
    } else {
      return ' border-gray-800'
    }
  }

  const iconClass = (route) => {
    if (window.location.href.indexOf(route) !== -1) {
      return ' text-blue-600'
    }
  }

  const textClass = (route) => {
    if (window.location.href.indexOf(route) !== -1) {
      return ' text-white md:text-white'
    } else {
      return ' text-gray-600 md:text-gray-400'
    }
  }

  return (
    <div className="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:relative md:h-screen z-10 w-full md:w-48">
      <div
        className="md:mt-12 md:w-48 md:fixed md:left-0 md:top-0 content-center md:content-start text-left justify-between">
        <ul className="list-reset flex flex-row md:flex-col py-0 md:py-3 px-1 md:px-2 text-center md:text-left">
          <li className="mr-3 flex-1">
            <InertiaLink href="/owner/dashboard"
              className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/dashboard')}>
              <i className={"fas fa-tv pr-2 "
              + iconClass('/owner/dashboard')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/dashboard')}>Dashboard</span>
            </InertiaLink>
          </li>
          <li className="mr-3 flex-1">
            <InertiaLink href="/owner/restaurants"
              className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/restaurants')}>
              <i className={"fa fa-utensils pr-2 "
              + iconClass('/owner/restaurants')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/restaurants')}>Restaurants</span>
            </InertiaLink>
          </li>
          <li className="mr-3 flex-1">
            <a href="#"
              className={"block py-1 md:py-3 pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/layouts')}>
              <i className={"fas fa-pencil-ruler pr-2 "
              + iconClass('/owner/layouts')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/layouts')}>Layouts</span>
            </a>
          </li>
          <li className="mr-3 flex-1">
            <a href="#"
              className={"block py-1 md:py-3 pl-0 md:pl-1 align-middle text-white no-underline hover:text-white border-b-2 hover:border-blue-900"
              + linkClass('/owner/payments')}>
              <i className={"fa fa-wallet pr-2 "
              + iconClass('/owner/payments')}></i><span
                className={"pb-1 md:pb-0 text-xs md:text-base block md:inline-block"
                + textClass('/owner/payments')}>Payments</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  )
}

编辑这是一个带有代码的代码笔的链接，以帮助调试https://codepen.io/hcphoon01/pen/OJmXrRN

更新我现在已经解决了一个问题，但又创建了另一个问题，我通过将最高级别的 div 更改为<div className="bg-gray-800 flex flex-col h-screen">然后添加flex-grow来修复空白问题在包含侧边栏的 div 上，尽管现在的问题是，如果内容大于屏幕，侧边栏不会变大以适应。 代码笔已更新以反映这一点

Answer 1

检查您的Sidebar组件。 它必须是h-auto或h-full或h-initial而不是h-screen 。 因为它放在main组件中，所以只有main应该是h-screen 。

请更改此代码而不是使用h-screen 。

<div class="bg-gray-800 shadow-xl h-16 bottom-0 mt-12 md:relative z-10 w-full md:w-48">

查看Tailwind Paly

有关 CSS 中的视口单位的更多信息，请查看此网络文档

Answer 2

添加h-screen类时，它将高度设置为100vh ，这将跨越视口的高度。 这里的问题是，由于我们正在固定高度， <div>不会增长到适合它的孩子，并且东西会溢出。

为了解决这个问题，我们可以使用min-h-screen实用程序类来设置min-height 。 这将允许<div>增长以适应其子项，但防止其缩小到视口高度以下。 我在您提供的 CodePen 中尝试了这一点，它似乎可以满足您的需求。

注意：在移动100vh上使用100vh有一些怪癖。 只需搜索“100vh mobile issue”即可找到更多信息，但您应该对其进行测试，看看这种行为是否是您想要的。 或者，您可以将百分比单位与h-full / min-h-full ，但您必须确保所有祖先的height / min-height设置为 100%，包括<body>和<html>标签。 自己在各种移动浏览器上进行测试，以确定哪一种更适合您的应用程序。

Answer 3

在主文件中的父 div 上，将 m-0 p-0 添加到 className 并在“Test”的 div 上将 whitespace-normal 添加到 className，如下图所示：

import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"

export default function Main({ name, children }) {

  return (
    <div className="m-0 p-0 bg-gray-800 flex flex-col h-screen">

      <Navbar />

      <div className="flex flex-col md:flex-row flex-grow">

        <Sidebar />

        <div className="flex-1 bg-gray-100">
          <div className="bg-gray-800 pt-3">
            <div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
              <h3 className="font-bold pl-2">{name}</h3>
            </div>
          </div>
          <div className="p-4 whitespace-normal">
            Test
          </div>
        </div>
      </div>
    </div>
  )
}