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

V2EX = way to explore

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

For Existing Member Sign In

This topic created in 668 days ago, the information mentioned may be changed or developed.

请教下大们，页面布局如下，为啥页面高度比屏幕调试多了 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 replies • 2024-07-05 11:18:53 +08:00

wildnode

Jul 4, 2024

TopNav 的 className 加个 `fixed`

deltaone

Jul 4, 2024

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

deltaone

Jul 4, 2024

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

wildnode

Jul 4, 2024

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

madao199

Jul 5, 2024

浏览器样式清了没