代码之家 › 专栏 › 技术社区 › fun joker

如何显示内容和边栏?

reactjs css html

fun joker · 技术社区 · 5 年前

Sidebar.Pusher 即使在滚动后也无法完全显示。

<Sidebar.Pusher dimmed={visible}>
            <Segment basic className={styles.content}>
              <DashBoard/>
            </Segment>
          </Sidebar.Pusher>

整个代码:

export default class NavBar extends Component {
  state = { visible: false }

  handleHideClick = () => this.setState({ visible: false })
  handleShowClick = () => this.setState({ visible: true })
  handleSidebarHide = () => this.setState({ visible: false })

  render() {
    const { visible } = this.state

    return (
      <div>
      <Grid>
      <Grid.Row>
        <Grid.Column width={16}>
            <Icon name='content' disabled={visible} onClick={this.handleShowClick} size='big'/>
            <div className={styles.header}>
              <img
                src={require('../images/rccg_transparent_logo.png')}
                width="80"
                height="80"
                alt="logo"
              />
              <Header as="h2" className={styles.headerTitle}>
                RCCG Europe Mainland Region 3
              </Header>
            </div>
          </Grid.Column>
      </Grid.Row>
      </Grid>
        <Sidebar.Pushable as={Segment} className={styles.content} >
          <Sidebar
            as={Menu}
            animation='overlay'
            icon='labeled'
            inverted
            onHide={this.handleSidebarHide}
            vertical
            visible={visible}
            width='thin'
          >
            <Menu.Item as='a'>
              <Icon name='home' />
              Home
            </Menu.Item>
            <Menu.Item as='a'>
              <Icon name='gamepad' />
              Games
            </Menu.Item>
            <Menu.Item as='a'>
              <Icon name='camera' />
              Channels
            </Menu.Item>
          </Sidebar>

          <Sidebar.Pusher dimmed={visible}>
            <Segment basic className={styles.content}>
              <DashBoard/>
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

.header {
    display: flex;
    margin-left: 500px;
    border-bottom: 2px;
    border-bottom-color: black;
}

.headerTitle {
    float: left;
    justify-content: center;
    margin-left: 50px !important;
}

.content {
    min-height: 100vh;
    overflow: scroll;
}

在下面的截图中,图表没有正确显示,只有半部分是可见的,为什么? 截图:

2 回复 | 直到 5 年前

Garvit Khamesra 5 年前

您需要更改仪表板的溢出属性。溢出:滚动

Preeti Aggarwal 5 年前

You need to put overflow:auto; property to the right side section not on full section.

<div class="app">
<div class="menu"></div>
<div class="content"></div>
</div>

<style>
.app{
height: 100vh;
}
.content{
overflow:auto;
}
</style>