<p>我正在嘗試使用 <strong>React</strong> 和 <strong>chakra-ui</strong> 元件實現具有固定導覽列和可折疊固定側邊欄的頁面。下面是範例程式碼。 </p> <pre class="brush:php;toolbar:false;">import { Box } 從 "@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> ); };</pre> <p>但是現在頂部導覽列的寬度始終沒有達到我的預期。這是它的當前輸出。 </p> <p>我想實現以下輸出。 </p> <p>紅色框是側邊欄，藍色框是頂部導覽列。預計他們兩人都將固定在目前的位置。請就如何實現我的期望提供一些建議。我將非常感激！ </p>

<Box position="fixed" top="0" right="0" width="calc(100vh - 200px)" height="50px" bg="blue" /> {/* Navbar */}