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

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

render() {const { visible } = this.statereturn (  <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>

总结

以上是内存溢出为你收集整理的html – 使用semantic-UI Sidebar制作全尺寸主要内容全部内容，希望文章能够帮你解决html – 使用semantic-UI Sidebar制作全尺寸主要内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。