reactjs - 如何创建固定侧边栏和可滚动的主要内容？

Question

在我的反应中，我在我的网格中使用了simple-flexbox。当我添加位置：固定到我的侧边栏组件时，我的主要组件与侧边栏重叠。请帮助我解决这个问题。

<Row className={css(styles.container)}>
           // My sidebar component
          <SidebarComponent/>
            
           // // My main component which has a header as well
          <Column flexGrow={1} className={css(styles.mainBlock)}>
            <HeaderComponent title={selectedItem} />

            <div className={css(styles.content)}>
              <Route exact path="/dashboard" component={ContentComponent} />
              <Route exact path="/products" component={ProductsComponents} />
              <Route exact path="/analytics" component={AnalyticsComponent} />
            </div>
          </Column>

</Row>

这是我的视觉

标签： reactjsflexboxsidebar

Answer 1

假设你的侧边栏有一个名为 sidebarContainer 的类，你可以使用这个 CSS

.sidebarContainer {
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
}

.mainBlock {
    width: calc(100vw - 200px);
    left: 200px;
    position: relative;
}