html - 使用语义 UI 边栏 react 组件制作全尺寸主要内容

Question

我正在尝试使用语义 Ui 组件制作一个具有反应的 Web 应用程序。但是，我真的很难让主要内容组件占据整个屏幕(见图)。我希望主要内容组件填满其余空间，但它似乎只占用了它需要的空间。最终我希望能够让侧边栏保持粘性并且只滚动主要内容

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

Answer 1

侧边栏将采用与其封闭的 div 相同的高度。看起来您希望内容恰好拉伸(stretch)到视口(viewport)的 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>