semantic-UIサイドバーの反応コンポーネントでフルサイズのメインコンテンツを作成する

Question

Semantic UIコンポーネントを使用して反応するWebappを作成しようとしています。しかし、私は本当に主なコンテンツコンポーネントが画面のフルサイズを占めるように苦労しています（画像参照）。私はメインのコンテンツコンポーネントが残りのスペースを埋めるようにしたいが、それは必要なだけのスペースを占有しているようだ。最終的に私は粘着性のサイドバーを持っているだけで、私はルートコンポーネントに階層までの中からあらゆるものにスタイルをインライン{height:100%}を適用しようとしましたが、何もいないようにみえメインコンテンツ

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> 
) 
} 

をスクロールできるようにしたいですそれがページの残りの部分を埋めるようにします。私はこれがこのような単純な問題のように思えるが、私は笑っている。何か案は？

乾杯 desired outcome

Answer 1

サイドバーには、その外側のdiv要素と同じ高さになります。コンテンツをビューポートのちょうど100％に伸ばしたいと思うようです。これが当てはまる場合、囲みdivの高さを '100vh'に設定することができます。

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

高さを超える可能性がある場合は、最小高さを '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>