React+Chakra-UI实现固定导航栏与可折叠侧边栏问题求助

问题根源在于固定定位元素的布局逻辑：原代码中导航栏的父容器设置了position: fixed，而固定定位元素是相对于视口定位的，导致导航栏的width:100%会占据整个视口宽度，而非侧边栏右侧的剩余区域。

调整后的实现代码如下：

import { Box } from "@chakra-ui/react";

export const App = () => {
  const sidebarWidth = "200px";
  const navbarHeight = "50px";

  return (
    <Box>
      {/* 固定侧边栏 */}
      <Box 
        position="fixed" 
        left="0" 
        top="0" 
        width={sidebarWidth} 
        height="100vh" 
        bg="red" 
      />
      
      {/* 固定导航栏 - 从侧边栏右侧开始，自动占满剩余宽度 */}
      <Box 
        position="fixed" 
        left={sidebarWidth} 
        top="0" 
        right="0" 
        height={navbarHeight} 
        bg="blue" 
      />
      
      {/* 主内容区域 - 避开侧边栏和导航栏的遮挡 */}
      <Box 
        ml={sidebarWidth} 
        mt={navbarHeight} 
        p="4" 
        minH="100vh"
      >
        {/* 页面内容写在这里 */}
        主内容展示区域
      </Box>
    </Box>
  );
};

关键修改说明： #

• 侧边栏：明确设置left:0和top:0锚定视口左侧，用100vh替代100%更直观表示占满视口高度。
• 导航栏：移除冗余的嵌套父容器，通过left: sidebarWidth和right:0的组合，自动填充侧边栏右侧到视口右边缘的全部宽度，无需手动计算calc(100% - 200px)。
• 主内容区域：通过ml（左外边距）避开侧边栏，mt（上外边距）避开导航栏，确保内容不会被固定栏遮挡。

如果需要实现侧边栏可折叠功能，只需将sidebarWidth改为状态变量（比如通过useState控制展开/折叠时的宽度），同时同步更新导航栏的left值和主内容的ml值即可。

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