TailwindCSS：如何将 header 和页脚固定到屏幕上，同时保持两者之间的可滚动内容？

Question

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

我一天的大部分时间都在为这个问题苦苦挣扎，我正在按照 as well as the code it provided here.

上的说明进行操作

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

但是，我很好奇并决定在 phone 上打开该页面。这是那里的结果，如您所见，所需的元素实际上都没有固定到屏幕上：

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

如何在保持内容可滚动的同时将 header 和导航栏固定在屏幕上？

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

App.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>
    );
}

Header.js:

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

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

其实你不需要将位置设置为“固定”或“绝对”。这个问题可以更简单地解决。

您需要 4 div。一个作为容器（我们可以将其 class 称为“根”），其中包含另外 3 divs.

为了定义每个内部 div 可以从根 div 中获取多少 space 我们可以使用“flex”（使用“flex”您可以定义与其他组件的比例).

（你当然可以随意改变根的高度和宽度）

.root {
  height: 70vh;
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.Header--container {
  flex: 1;
  background-color: green;
}

.Footer--container {
  flex: 1;
  background-color: red;
}

.Content--container {
  flex: 5;
  background-color: white;
  overflow-y: scroll;
}

<div class="root">
  <div class="Header--container">
  </div>
  <div class="Content--container">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="Footer--container">
  </div>
</div>

Answer 2

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

Modified code from the tailwind play linked in your question.

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

TailwindCSS：如何将 header 和页脚固定到屏幕上，同时保持两者之间的可滚动内容？

TailwindCSS: How can I fix a header & footer to the screen while keeping scrollable content in between?

flexbox

reactjs

tailwind-css