小白现次请教 nextjs layout 相关问题。

[deltaone]

请教下大们，页面布局如下，为啥页面高度比屏幕调试多了 60px ，60px 也就是 TopNav 的高度。
--------------------------------------------
|
| TopNav
|-----------------------------------
|
|
|
SideBar |
|
|
|
|
|
|
|
----------------------------------------------

SideBar className="flex flex-col justify-between top-0 left-0 h-full w-16"
TopNav className="w-full h-[60px] m-0 p-0 bg-stone-50"

layout.tsx :

<div className="flex flex-row">
<div className="">
<Sidebar />
</div>
<div className="w-full">
<div className="flex flex-col justify-start text-center">
<TopNavBar/>
<div className="w-full">
{children}
</div>
</div>
</div>
</div>

[wildnode]

TopNav 的 className 加个 `fixed`

[deltaone]

--------------------------------------------
|. |.
|. |. TopNav
|. |-------------------------------
|. |
|. |
|. |
| SideBar |
|. |. Main Page
|. |
|. |
|. |
|. |
|. |
|. |
----------------------------------------------

[deltaone]

@wildnode 多谢回复。
TopNav 加 fixed 后，整体高度是不会多出 60px ，但 main page 顶上的 60px 顶到 TopNav 里了。
怎么能做到 main page 的高度刚好是 （ h-screen - 60px ） 呢。

[wildnode]

.mainPage { height: calc(100vh - 60px); }

[madao199]

浏览器样式清了没