小编YUN*_*ile的帖子

我正在尝试使用Semantic Ui组件做出反应.但是,我真的很难让主内容组件占据屏幕的全尺寸(见图).我希望主要内容组件能够填满剩下的空间,但似乎它只占用了所需的空间.最终,我希望能够使侧边栏变得粘稠,只滚动主要内容

render() {
const { visible } = this.state
return (
  <div>
    <Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
    <Sidebar.Pushable as={Segment}>
      <Sidebar as={Menu} animation='push' width='thin' visible={visible} icon='labeled' vertical inverted>
        <Menu.Item name='home'>
          <Icon name='home' />
          Home
        </Menu.Item>
        <Menu.Item name='gamepad'>
          <Icon name='gamepad' />
          Games
        </Menu.Item>
        <Menu.Item name='camera'>
          <Icon name='camera' />
          Channels
        </Menu.Item>
      </Sidebar>
      <Sidebar.Pusher>
        <Segment basic>
          <Header as='h3'>Application Content</Header>
          <Image src='/assets/images/wireframe/paragraph.png' />
        </Segment>
      </Sidebar.Pusher>
    </Sidebar.Pushable>
  </div>
)
}

我试图将内联样式应用于{height:100%}从层次结构到根组件的所有内容,但似乎没有任何东西可以填充页面的其余部分.我知道这似乎是一个简单的问题,但我被困了哈哈.有任何想法吗？

干杯 希望得到结果