我正在尝试使用 React 和 chakra-ui 组件实现一个具有固定导航栏和可折叠固定侧边栏的页面。下面是示例代码。
1
1134import { Box } from "@chakra-ui/react";
export const App = () => {
return (
<Box display="flex">
<Box position="fixed" width="200px" height="100%" bg="red" /> {/* Sidebar */}
<Box flex="1" position="fixed">
<Box position="fixed" top="0" width="100%" height="50px" bg="blue" /> {/* Navbar */}
<Box mt="50px" p="4">
{/* Rest content */}
</Box>
</Box>
</Box>
);
};
但是现在顶部导航栏的宽度始终没有达到我的预期。这是它的当前输出。
我想实现以下输出。
红色框是侧边栏，蓝色框是顶部导航栏。预计他们两人都将固定在目前的位置上。请就如何实现我的期望提供一些建议。我将非常感激！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你可以尝试：
<Box position="fixed" top="0" right="0" width="calc(100vh - 200px)" height="50px" bg="blue" /> {/* Navbar */}注意 200px 是侧边栏宽度