使用語義UI邊欄製作全尺寸的主要內容邊欄反應組件

我正在嘗試使用語義Ui組件做出反應的Web應用程序。不過，我真的很努力地讓主要內容組件佔據屏幕的全尺寸（見圖片）。我希望主要內容組件填滿剩餘空間，但它似乎只佔用盡可能多的空間。最後，我希望能夠有側邊欄粘，只有滾動的主要內容使用語義UI邊欄製作全尺寸的主要內容邊欄反應組件

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

來源

2017-06-26 YUNoCompile

側邊欄將採取相同的高度，它的外圍股利。它看起來像你想要的內容完全伸展到視口的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>

來源

2017-09-28 03:11:31 JustinTRoss

使用語義UI邊欄製作全尺寸的主要內容邊欄反應組件

回答

相關問題