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 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制作全尺寸主要内容所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)