TailwindCSS：如何将页眉和页脚固定到屏幕，同时保留其间的可滚动内容？

Question

我正在使用 Tailwind CSS 为客户端创建一个 React PWA，我想要实现一个布局，其中标题固定在屏幕顶部，导航栏固定在屏幕底部。在两者之间，我将显示动态大小的可滚动内容。

我一天的大部分时间都在努力解决这个问题，并且我正在按照此答案的说明以及此处提供的代码进行操作。

我虽然明白了，因为我在相关组件中实现了所有推荐的类，并且在浏览器开发工具上得到了这个结果：

然而，我很好奇，决定在手机上打开该页面。这是结果，正如您所看到的，所需的元素实际上都没有固定到屏幕上：

此时我完全迷失了。我尝试className={fixed}在导航栏中使用，但即使向导航栏或内容添加边距或填充，它最终也会剪切部分内容。

如何将标题和导航栏固定到屏幕上，同时保持内容可滚动？

这些是我的代码的相关部分：

应用程序.js：

function App() {
    return (
        <Router>
            <div className='flex flex-col h-screen overflow-hidden'>
                <Header></Header>
                <div className='MainContent flex-1 overflow-y-scroll py-2 mx-2'>
                    <Routes>
                        <Route path="/" element={<OrderView />} />
                        <Route path="/DeliverymenView" element={<DeliverymenView />} />
                        <Route path="/InventoryView" element={<InventoryView />} />
                        <Route path="/RouteGenerationView" element={<RouteGenerationView />} />
                        <Route path="/AdministrativeView" element={<AdministrativeView />} />
                        <Route path="*" element={<ErrorView />} />
                    </Routes>
                </div>
                <Navbar></Navbar>
            </div>
        </Router>
    );
}

标头.js：

const Header = () => {
    return (
        <div className="Header shadow-md bg-white w-full ">
            <CurrentPage />
        </div>
    )
}

导航栏.js：

function Navbar() {
    return (
        <div className="Navbar w-full flex flex-row gap-x-2 justify-evenly py-1 bg-white drop-shadow-md-top">
            <Link to="/">
                <MdShoppingCart className="text-zinc-400 text-5xl "></MdShoppingCart>
            </Link>
            <Link to="/DeliverymenView">
                <MdPerson className="text-zinc-400 text-5xl "></MdPerson>
            </Link>
            <Link to="/InventoryView">
                <MdViewList className="text-zinc-400 text-5xl "></MdViewList>
            </Link>
            <Link to="/RouteGenerationView">
                <MdDeliveryDining className="text-zinc-400 text-5xl "></MdDeliveryDining>
            </Link>
        </div>
    )
}

Answer 1

将 flex 保留在父容器上的一种方法是使用或添加sticky到页眉和页脚 div，如下所示：top-0bottom-0

修改了问题中链接的顺风游戏的代码。

<div class="flex flex-col h-screen">
  <header class="w-full text-center border-b border-grey p-4 sticky top-0">Some header</header>
  <main class="flex-1 overflow-y-scroll">
    <div class="min-h-screen bg-slate-100">
      <p>This is a very long section that consumes 100% viewport height!</p>
    </div>
    <div class="min-h-screen bg-slate-200">
      <p>This is second long section that consumes 100% viewport height!</p>
    </div>
    <div class="min-h-screen bg-slate-100">
      <p>This is third long section that consumes 100% viewport height!</p>
    </div>
    <div class="min-h-screen bg-slate-200">
      <p>This is fourth long section that consumes 100% viewport height!</p>
    </div>
    <div class="min-h-screen bg-slate-100">
      <p>This is fifth long section that consumes 100% viewport height!</p>
    </div>
  </main>
  <footer class="w-full text-center border-t border-grey p-4 sticky bottom-0">some footer</footer>
</div>