如何在Tailwind中让PanelMaster填充Navbar剩余屏幕高度且无滚动？

核心思路是通过flex垂直布局让页面容器占满视口高度，Navbar固定高度，剩余空间自动分配给PanelMaster，同时确保所有嵌套组件继承高度，避免出现滚动条。

修改步骤： #

1. 调整App组件容器
   将外层容器设置为flex flex-col min-h-screen，让整个页面容器至少占满浏览器视口高度，子元素垂直排列。Navbar保留h-1/6固定高度，PanelMaster用flex-1自动填充剩余空间。

2. 让PanelMaster及其子组件撑满高度
   给PanelMaster的外层div添加h-full，确保它完全占据父级分配的剩余空间；同时给Panel1、Panel2的容器添加h-full flex，让内部内容能填充整个区域。

修改后的完整代码： #

App组件

function App() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      <PanelMaster />
    </div>
  );
}

PanelMaster组件

import React from 'react';
import Panel1 from './Panel1.tsx';
import Panel2 from './Panel2.tsx';

const PanelMaster = () => {
    return(
        <div className="flex h-full">
            <div className="bg-pink-500 w-4/5 h-full">
                <Panel1 />
            </div>
            <div className="bg-green-500 w-1/5 h-full">
                <Panel2 />
            </div>
        </div>
    )
};

export default PanelMaster;

Panel1组件

import React from "react";

const Panel1 = () => {
    return(
        <div className="flex-col h-full flex">
            <div>Test</div>
        </div>
    )
};

export default Panel1;

Panel2组件

import React from "react";

const Panel2 = () => {
    return(
        <div className="flex-col h-full flex">
            <p>2</p>
            <p>2</p>
            <p>2</p>
        </div>
    )
};

export default Panel2;

Navbar组件（无需修改）

import React from "react";

const Navbar = () => {
    return(
        <div className="flex h-1/6 bg-blue-500">
            <div className="grow">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold w-full h-full rounded">Test</button>
            </div>
            <div className="grow">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold w-full h-full rounded"/>
            </div>
            <div className="grow">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold w-full h-full rounded"/>
            </div>
            <div className="grow">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold w-full h-full rounded"/>
            </div>
        </div>
    )
};

export default Navbar;

原理说明： #

• min-h-screen 确保App容器高度至少等于浏览器视口高度，避免内容不足时页面收缩。
• flex-col 让Navbar和PanelMaster垂直排列。
• flex-1 让PanelMaster自动占据Navbar之外的所有剩余空间。
• 各级嵌套组件添加h-full，确保高度逐层传递，最终所有内容刚好填满视口，不会出现滚动条。

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