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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 428 天前的主题，其中的信息可能已经有所发展或是发生改变。

请教下大们，页面布局如下，为啥页面高度比屏幕调试多了 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>

layout

height

TopNav

5 条回复 • 2024-07-05 11:18:53 +08:00

wildnode

2024-07-04 18:01:26 +08:00

TopNav 的 className 加个 `fixed`

deltaone

2024-07-04 18:11:06 +08:00

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

deltaone

2024-07-04 18:13:23 +08:00

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

wildnode

2024-07-04 18:30:52 +08:00

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

madao199

2024-07-05 11:18:53 +08:00

浏览器样式清了没