Making Full-Size Hauptinhalt mit Semantic-UI Sidebar reagieren Komponenten

Question

Ich versuche, eine Webapp mit reagieren mit Semantic Ui Komponenten. Allerdings habe ich wirklich Probleme damit, dass die Hauptinhaltskomponente die volle Größe des Bildschirms einnimmt (siehe Bild). Ich möchte, dass die Hauptinhaltskomponente den Rest des Raums ausfüllt, aber es scheint, als würde es nur so viel Platz einnehmen, wie es braucht. Schließlich möchte ich die Sidebar klebrig zu haben, um der Lage sein, und blättern Sie nur den Hauptinhalt

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

Ich habe versucht, von innen auf die der Hierarchie der Stammkomponente den Stil Inline {height:100%} auf alles anzuwenden, aber nichts scheint zu Lass es den Rest der Seite füllen. Ich weiß, dass dies ein so einfaches Problem ist, aber ich stecke fest, haha. Irgendwelche Ideen?

Prost desired outcome

Answer 1

Die Seitenleiste wird die gleiche Höhe wie seine umschließenden div nehmen. Es sieht so aus, als ob der Inhalt auf genau 100% des Ansichtsfensters gedehnt werden soll. Wenn dies der Fall ist, können Sie die Höhe des einschließenden Div auf '100vh' einstellen.

Wenn Sie möchten, dass die Höhe möglicherweise darüber hinaus geht, können Sie min-height auf '100vh' setzen.

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

Wenn Sie es möchten, bevor der Rest der Seite nur für die Aufnahme oder nach einem anderen Inhalt, können Sie folgendes tun:

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