标题 div 保持在顶部，垂直滚动 div 在下方，滚动条仅附加主体

Question

这里我使用引导类作为sticky top 标头。

header.js

<header className="header sticky-top">HEADER</header>

样式表

header {
  overflow: hidden;
  padding: 20px 10px;
  display: inline-flex;
  width: 100%;
  height: fit-content;
  background-color: blue;
}

body {
  margin: 0;
  height: 100vh;
  overflow:auto;
  scroll-behavior: smooth;
}

这就是我想要达到的目标。

______________________
|_______header_______|
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

* = scrollbar

这是要处理的示例项目 demo code sandbox

Answer 1

您需要将标头组件导入到您的应用中，例如：

import Header from "./pages/Header";

并在 JSX 中实际使用它：

function App() {
  return (
    <div className="App">
      <Header></Header>

还要在actin中看到这个内容需要滚动：