html – 使用semantic-UI Sidebar制作全尺寸主要内容

我正在尝试使用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％}应用于从层次结构到根组件的所有内容,但似乎没有任何东西可以填充页面的其余部分.我知道这似乎是一个简单的问题,但我被困了哈哈.有任何想法吗？

干杯
desired outcome

解决方法

侧边栏的高度与其封闭的div相同.看起来您希望内容延伸到视口的100％.如果是这种情况,您可以将封闭div上的高度设置为“100vh”.

<div style={{height: '100vh'}} />

如果你想要高度可能超出,你可以将min-height设置为’100vh’.

<div style={{minHeight: '100vh'}} />

如果您希望它在其他内容之前或之后占用页面的其余部分,您可以执行以下操作：

<div style={{minHeight: '100vh',display: 'flex',flexFlow: 'column Nowrap'}}>
    <div>Content Before</div>
    <div style={{flex: 1}}>
        Main Content with Sidebar
    </div>
    <div>Content After</div>
</div>