semantic-ui-react fixed sidebar and navbar: can't get sidebar and content to scroll nicely

问题

I'm new to semantic-ui-react and stuck trying to implement this layout.

Look at this fiddle

This is the closest I've been able to achieve. The two components have scroll-able areas (desired) but my primary issue is the sidebar doesn't stay fixed when scrolling in content, and scrolling to the bottom of the sidebar there is whitespace beneath.

Any ideas?

Here is the relevant component code:

  <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>

UPDATE

New fiddle. I am mostly successful at getting the desired behavior; I'm no longer using the Sidebar component and instead using a simple Menu. My beginner CSS skills are not enough to figure out how to do it with Sidebar.

来源：https://stackoverflow.com/questions/48290534/semantic-ui-react-fixed-sidebar-and-navbar-cant-get-sidebar-and-content-to-scr

标签

css

reactjs

layout

semantic-ui

semantic-ui-react