如何使用Tailwind实现最后一个Div占据剩余高度？

你的代码里main容器缺少垂直方向的flex布局设置，导致内部的flex-grow属性无法生效。只需给main添加flex flex-col类即可实现需求：

修改后的代码：

function Home() {
  const [expanded, setExpanded] = useState(true);
  
  return (
    <div className="flex h-screen">
      <SidebarContext.Provider value={{ expanded, setExpanded }}>
        <SideBarContent expanded={expanded}/>
      </SidebarContext.Provider>
      <main className="flex-grow h-full flex flex-col"> {/* 添加flex flex-col */}
        <header className="text-3xl text-main font-bold h-fit">Settings</header>
        <div className="flex-grow bg-portica-300">
          s
        </div>
      </main>
    </div>
  );
}

关键说明： #

• flex：将main设为flex容器，让内部元素遵循flex布局规则
• flex-col：把flex容器的主轴方向改为垂直（默认是水平），使header和下方div垂直排列
• 此时下方的div通过flex-grow类（对应CSS的flex-grow:1）就能自动占据main容器的剩余垂直空间

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