IT技术 - Semantic-ui-react 固定侧边栏和导航栏：无法让侧边栏和内容很好地滚动 - 吾爱随笔录

我是 Semantic-ui-react 的新手，并且一直在尝试实现这种布局。

这是我能够实现的最接近的目标。这两个组件具有可滚动区域（需要），但我的主要问题是侧边栏在滚动内容时不会保持固定，滚动到侧边栏底部下方有空白。

有任何想法吗？

这是相关的组件代码：

  <div style={{paddingTop: '51px'}}>
    <Menu size="massive" fixed="top" inverted borderless >
      <Menu.Item header onClick={()=>{}}>
        App Name and Logo
      </Menu.Item>
      <Menu.Item onClick={()=>{}}>
        <Icon name="bars"/>
      </Menu.Item>
      <Menu.Menu position="right" style={{fontSize: '1rem'}}>
        <Menu.Item onClick={()=>{}}><Icon name="sign in"/>log in</Menu.Item>
      </Menu.Menu>

    </Menu>
    <div>
      <Sidebar.Pushable as={Segment} >
        <Sidebar as={Menu} borderless
                 animation='push' visible={true} vertical inverted>
          <Menu.Item name='home' onClick={()=>{}}>
            <Icon name='home'/>
            <span>Home</span>
          </Menu.Item>
          <Menu.Item name='users' onClick={()=>{}}>
            <Icon name='users'/>
            <span>Users</span>
          </Menu.Item>
          <Menu.Item name='repos' onClick={()=>{}}>
            <Icon name='fork' />
            <span>Repositories</span>
          </Menu.Item>
          {sidebarArr}
        </Sidebar>
        <Sidebar.Pusher >
          <Segment basic>
            {contentArr}

          </Segment>
        </Sidebar.Pusher>
      </Sidebar.Pushable>

    </div>
  </div>

更新

新小提琴。我主要是成功地获得了想要的行为；我不再使用侧边栏组件，而是使用简单的菜单。我的 CSS 初学者技能不足以弄清楚如何使用侧边栏来完成。

if (menuMobile) { return ( <Sidebar.Pushable style={{ transform: "none" }} as={Segment}> <Sidebar as={Menu} style={{ position: "fixed", top: "0px", bottom: "0px", overflowY: "auto", }} animation="overlay" icon="labeled" inverted onHide={() => setVisible(false)} vertical visible={visible} width="thin" > <Menu.Item as="a"> <Icon name="home" /> Home </Menu.Item> <Menu.Item as="a"> <Icon name="gamepad" /> Games </Menu.Item> <Menu.Item as="a"> <Icon name="camera" /> Channels </Menu.Item> </Sidebar> <Sidebar.Pusher dimmed={visible}> <Visibility onBottomPassed={() => { setMenuFixed(true); console.log("BOTTOM PASSED!"); }} onBottomVisible={() => { setMenuFixed(false); console.log("VISIBLE"); }} once={false} > <Menu borderless //stackable fixed={menuFixed ? "top" : undefined} style={menuFixed ? fixedMenuStyle : menuStyle} > <Container> <Menu.Item as="a" href="/dashboard" header> <Image size="mini" src={process.env.PUBLIC_URL + "/Flaw-logo-notext.png"} style={{ marginRight: "1.5em" }} /> Conference System </Menu.Item> <Menu.Menu position="right"> <Menu.Item as="a" onClick={() => setVisible(true)}> <Icon name="sidebar" /> </Menu.Item> </Menu.Menu> </Container> </Menu> </Visibility> {children} </Sidebar.Pusher> </Sidebar.Pushable> ); }