reactjs - tailwind h-screen container is (header amount of height) 离屏幕底部太远

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，您必须将子组件的高度降低页眉的高度。所以用 h-[calc(100vh-74px)]

替换 main 的 h-screen

我是说改变

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 `