使用 semantic-UI Sidebar react 组件制作全尺寸主要内容

Question

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

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。看起来您希望内容恰好拉伸到视口的 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>

Answer 2

为高度为 100vh 的基本段添加新的 class

Answer 3

我知道我迟到了，但这肯定会对其他人有所帮助。

您实际上可以覆盖默认的 css 推送器样式，例如：

.pushable:not(body) {
  -webkit-transform: none;
  -ms-transform: none;
      transform: none;
}

.pushable:not(body) > .ui.sidebar,
.pushable:not(body) > .fixed,
.pushable:not(body) > .pusher:after {
  position: fixed;
}

使用 semantic-UI Sidebar react 组件制作全尺寸主要内容

Making full-size main content with semantic-UI Sidebar react components

html

css

reactjs

semantic-ui