React.js实现固定满高可滚动侧边栏的方案

我需要实现以下布局效果：

• 侧边栏即使只有1-2个选项，也保持全屏高度，主内容区同样如此
• 当侧边栏选项数量超出屏幕范围时，侧边栏变为可滚动状态，但主内容区不可滚动，效果类似YouTube首页
• 之前尝试将侧边栏高度设为100vh，但导致侧边栏超出页面范围，整个页面变成可滚动状态，现寻求正确的实现方式

现有代码 #

UserDashboard.js #

function UserDashboard() {
  return (
    <>
        <Header />
        <main>
          <Sidebar />
          <Main />
        </main>
    </>
  );
}

UserDashboard.css #

main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 100%;
}

Sidebar.js #

function Sidebar() {
 return (
    <section className="sidebar">
      <SidebarItem
        to="/"
        title="Profile"
        selected={selectedItem === "Profile"}
        onClick={() => handleItemClick("Profile")}
      />
      <SidebarItem
        to="/calendar"
        title="Calendar"
        selected={selectedItem === "Calendar"}
        onClick={() => handleItemClick("Calendar")}
      />
      <SidebarItem
        to="/leave"
        title="Leave"
        selected={selectedItem === "Leave"}
        onClick={() => handleItemClick("Leave")}
      />
    </section>
  );
}

Sidebar.css #

.sidebar {
    flex: 0.2;
    background-color: #0B2853;
    color: white;
    height: 100%;
    overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

Main.js #

function Main() {
  return (
    <section className="main-content">
      <section className="main-container">
        <Routes>
          <Route path="/leave" element={<Leave/>} />
          <Route path="/leave/applyleave" element={<ApplyLeave />} />
        </Routes>
      </section>
    </section>
  );
}

Main.css #

.main-content {
    flex: 0.8;
}

.main-container {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 96%;
    margin: 1%;
    border-radius: 5px;
}

解决方案 #

核心思路是让页面容器占据完整视口高度，通过flex布局分配Header和main的空间，将滚动限制在侧边栏或主内容区内部，避免页面整体滚动。

步骤1：设置全局基础样式 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁止页面整体滚动 */
}

步骤2：调整UserDashboard布局结构 #

给UserDashboard的外层容器（包裹Header和main的元素）添加垂直flex布局，让main自动填充Header下方的剩余空间：

/* 假设外层容器类名为dashboard-container，可根据实际结构调整 */
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占据整个视口高度 */
}

main {
  flex: 1; /* 填充Header下方剩余空间 */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* 保持侧边栏与主内容区在同一行 */
  overflow: hidden; /* 避免main内部溢出导致页面滚动 */
}

步骤3：修改侧边栏与主内容区样式 #

.sidebar {
  flex: 0.2;
  background-color: #0B2853;
  color: white;
  height: 100%;
  overflow-y: auto; /* 内容超出时显示滚动条，否则无滚动条 */
}

.main-content {
  flex: 0.8;
  height: 100%;
  overflow: hidden; /* 禁止主内容区整体滚动 */
}

.main-container {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  height: 100%; /* 填充main-content的高度 */
  margin: 1%;
  border-radius: 5px;
  overflow-y: auto; /* 若主内容区内部需要滚动，给此容器添加 */
}

关键说明 #

• 用overflow: hidden锁定页面整体滚动，将滚动行为限制在指定容器内
• 通过flex布局的flex:1让main自动适配剩余空间，避免直接用100vh导致与Header高度叠加超出视口
• 侧边栏的overflow-y: auto会智能显示滚动条，内容较少时保持全屏高度

内容的提问来源于stack exchange，提问作者Bishwaroop Dey