顺风 h 屏幕容器（标头高度）距离屏幕底部太远

Question

我有一个布局，其中有左侧导航、顶部导航栏，然后是子组件的主要区域。问题是所有子组件都稍微向下推过屏幕底部。

我可以通过添加 pb-36 来解决这个问题，但这会留下一个恼人的间隙。

const style = {
  container: `h-screen overflow-hidden relative `,
  mainContainer: `bg-gray-800 flex flex-col  pl-0   w-full lg:w-[calc(100%-13rem)]`,
  main: `bg-gray-100  h-screen overflow-auto lg:rounded-tl-3xl `,
};

渲染部分：

 <LayoutProvider>
      <div className={style.container}>
        <div className="flex items-start">
          <Overlay />
          <SideNavigation mobilePosition="left" />
          <div className={style.mainContainer}>
            <TopNavigation />
            <main className={style.main}>{children}</main>
          </div>
        </div>
      </div>
    </LayoutProvider>

例如，如果我删除上面的 TopNavigation，那么它将删除标题，然后子组件将正确适合。因此子组件会向下偏移那么多。

顶部导航是：

 <header className="bg-gray-800 h-[74px] items-center relative w-full ">

Answer 1

由于标题占据74px了屏幕，因此您必须将子组件的高度减少标题的高度。所以将 main 替换h-screen为h-[calc(100vh-74px)]

我的意思是改变

main: `bg-gray-100  h-screen overflow-auto lg:rounded-tl-3xl `

以此代替

main: `bg-gray-100  h-[calc(100vh-74px)] overflow-auto lg:rounded-tl-3xl `