ShadCn UI ResizablePanelGroup如何自动填充页面剩余高度？

问题场景 #

页面整体高度设为100vh，包含Header组件和带4个面板的ResizablePanelGroup组件，期望实现：

• ResizablePanelGroup无需手动指定固定高度，自动填充Header下方的剩余空间
• 仅当ResizablePanel内的内容超出面板可用空间时，内容区域可滚动
  当前包裹ResizablePanelGroup的红色容器未填满Header下方的剩余高度，无法达到预期效果。

解决方案 #

通过Flex布局实现剩余空间自动填充，同时为面板内容添加滚动容器：

1. 调整RootLayout的布局结构 #

将包裹Header和子组件的容器设置为垂直方向的Flex布局，让子组件容器自动占据Header下方的剩余空间。

2. 确保ResizablePanelGroup及父容器高度继承 #

给ResizablePanelGroup的父容器设置h-full，同时为每个ResizablePanel内部的内容容器添加滚动属性，实现内容超出时滚动。

修改后的代码 #

RootLayout 代码 #

import ChatNav from "@/components/chat/ChatNav";
import Header from "@/components/common/Header";
import { Toggle } from "@/components/ui/toggle";
import UtilContext from "@/context/UtilContext";
import type { Metadata } from "next";
import { useContext, createContext } from "react";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="h-screen bg-black">
      {/* 改为flex垂直布局，高度占满父容器 */}
      <div className="absolute inset-4 flex flex-col h-full">
        <UtilContext>
          <Header />
          {/* 添加flex-1让容器自动填充剩余空间 */}
          <div className="bg-red-500 flex-1 overflow-hidden"> {children}</div>
        </UtilContext>
      </div>
    </div>
  );
}

Page 代码 #

"use client";
import Chat from "@/components/chat/Chat";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import ChatNav from "@/components/chat/ChatNav";
import { useContext } from "react";
import { UtilPanelContext } from "@/context/UtilContext";
import LSide from "@/components/chat/LSide";

const page = () => {
  const { leftPanel } = useContext(UtilPanelContext);

  return (
    <div className="h-full">
      <ResizablePanelGroup direction="horizontal" className="h-full">
        {/* 侧边导航面板 */}
        <ResizablePanel defaultSize={10} className="min-w-[80px] max-w-[80px]">
          {/* 添加overflow-auto，内容超出时滚动 */}
          <div className="h-full flex flex-col overflow-auto">
            <div className="flex-grow-1"> Nav</div>
          </div>
        </ResizablePanel>
        <ResizableHandle />

        {/* 历史面板 */}
        <ResizablePanel defaultSize={leftPanel ? 30 : 0}>
          {/* 添加overflow-auto */}
          <div className="h-full overflow-auto">LSide</div>
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* 聊天工作区 */}
        <ResizablePanel defaultSize={50}>
          {/* 添加overflow-auto */}
          <div className="h-full overflow-auto">Chat</div>
        </ResizablePanel>
        <ResizableHandle withHandle />

        {/* 侧边面板 */}
        <ResizablePanel defaultSize={50}>
          {/* 添加overflow-auto */}
          <div className="h-full overflow-auto">
            <h1>Hello </h1>
            {/* 可添加更多内容测试滚动 */}
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
};

export default page;

修改说明 #

• RootLayout中，将absolute inset-4容器改为flex flex-col h-full，同时给子组件容器添加flex-1 overflow-hidden，确保它填充Header下方的剩余空间，并且避免内容溢出父容器。
• Page中，给ResizablePanelGroup添加h-full确保高度继承，同时给每个ResizablePanel内部的内容容器添加h-full overflow-auto，实现内容超出面板高度时自动滚动。

内容的提问来源于stack exchange，提问作者Isuru Akalanka