css - 页面背景颜色或图像位于标题下

Question

我有一个 React 项目，这就是它的索引页面：

在 div 里面，我有侧栏和它的主要 css：

.side-nav {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  width: calc(3.5vw + 3.5vh);

这就是侧边栏、导航栏和主页的堆叠方式。

const BaseLayout: React.FC<BaseLayoutProps> = (props) => {
  const { className, user, navClass = "with-bg", loading, children } = props;
  return (
    // display:flex will keep sideBar and main, side by side
    <div style={{ display: "flex" }}>
      <SideBar />
      <Header className={navClass} user={user} loading={loading} />
      {children}
    </div>
  );
};

这是 Header 的主要 div

 .port-navbar.port-default {
  width: 100vw;
  z-index: 15;
  height: calc(3.5vw + 3.5vh);
}

这是索引页的主要 div：

     background-color: green;

标题下还有另一个组件。我希望该组件应该在标题下。在当前结构中，我不明白为什么 index-page 没有在标题之后开始。

另外，我不明白为什么标题右侧有额外的空间。

Answer 1

首先side-nav不是标题的类名，因此样式不会在其上执行。

其次，您需要将其用于 Header 组件：

position: absolute;

如果这不起作用，请显示更多详细信息和片段。