<p>我正在尝试使用 <strong>React</strong> 和 <strong>chakra-ui</strong> 组件实现一个具有固定导航栏和可折叠固定侧边栏的页面。下面是示例代码。</p> <pre class="brush:php;toolbar:false;">import { Box } from &quot;@chakra-ui/react&quot;; export const App = () =&gt; { return ( &lt;Box display=&quot;flex&quot;&gt; &lt;Box position=&quot;fixed&quot; width=&quot;200px&quot; height=&quot;100%&quot; bg=&quot;red&quot; /&gt; {/* Sidebar */} &lt;Box flex=&quot;1&quot; position=&quot;fixed&quot;&gt; &lt;Box position=&quot;fixed&quot; top=&quot;0&quot; width=&quot;100%&quot; height=&quot;50px&quot; bg=&quot;blue&quot; /&gt; {/* Navbar */} &lt;Box mt=&quot;50px&quot; p=&quot;4&quot;&gt; {/* Rest content */} &lt;/Box&gt; &lt;/Box&gt; &lt;/Box&gt; ); };</pre> <p>但是现在顶部导航栏的宽度始终没有达到我的预期。这是它的当前输出。</p> <p>我想实现以下输出。</p> <p>红色框是侧边栏，蓝色框是顶部导航栏。预计他们两人都将固定在目前的位置上。请就如何实现我的期望提供一些建议。我将非常感激！</p>

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