Reactjs tailwind hscreen 容器(高度的标题量)离屏幕底部太远

发布于06月19日

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

例如，我可以通过添加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 ">

Reactjs tailwind hscreen 容器(高度的标题量)离屏幕底部太远

推荐答案

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时，它在严格模式下触发两次

为什么我的React App.js只在页面刷新时呈现3次？

React，React Router，Joy UI：如何在导航离开和返回后禁用snackbar重新出现？

无法将react 路由状态从路由传递给子组件

react '；S使用状态不设置新状态

无法使用导入app/page.jsx的组件中的tailwind 类文本操作和自定义动画

为什么react日历时间轴项Renderprops 不能与useState挂钩一起使用？

如何使用 App Router 和服务器组件在 Next.js 13 中实现分页

如何在 TimePicker 中更改时钟 colored颜色和确定按钮字体 colored颜色 - MUI React

在 React 中将 MUI 样式外包到单独的文件中？

修改React数据表扩展组件

useRef 不关注模态

useMemo 依赖项的行为

在 monorepo 内的工作区或库之间共享 redux 状态

如何在 JS 中绘制具有不同笔画宽度的样条线

当我在 React Router Dom 中使用两个参数并直接在页面上导航时，数据获取没有发生

将水平滚动视图添加到底部导航选项卡

Select 项目后 Select HeadlessUI 组合框中的所有文本？

如何在props 更改时运行自定义挂钩？

setState 改变对象引用