使用左侧高度设置右侧高度

Question

我正在使用 semanti-UI-react。我想要实现的 Ui 是一个垂直分为两部分的模式。左侧显示视频，右侧显示时间戳和视频索引的描述。我的索引右侧应该是可滚动的。

            <Grid>
              <Grid.Row>
                <Grid.Column style={{margin: '0', padding: '0'}} computer={10} mobile={16} table={16} >
                  <Segment raised inverted style={{ padding: '2.5rem 0'}}>
                    <ReactPlayer style={{margin: '0 auto'}} ref={this.ref} url={this.state.url} controls={true} playing={true}/>
                  </Segment>
                </Grid.Column>
                <Grid.Column style={{margin: '0', padding: '0'}} computer={6} mobile={16} table={16}>
                  <Segment basic style={{overflowX: 'hidden', margin: '0 auto', height: '450px'}}>
                    <List relaxed>
                      {_.keys(this.props.videoMeta.timestamps).map(ts => (
                        <List.Item className='clickable' onClick={() => this.forward(this.props.videoMeta.timestamps[ts])}>
                          <List.Icon name='video' size='fullscreen' verticalAlign='middle'/>
                          <List.Content>
                            <List.Header style={{textTransform: 'capitalize'}}>{ts}</List.Header>
                            <List.Description>{this.props.videoMeta.timestamps[ts]}</List.Description>
                          </List.Content>
                        </List.Item>
                      ))}
                    </List>
                  </Segment>
                </Grid.Column>
              </Grid.Row>
            </Grid>

这就实现了上面提到的UI。但是我必须为我的右侧网格列设置一个硬编码的高度值。如果我不设置它，它就不可滚动。我尝试了百分比值，但这使我的右手侧高度与左手侧高度不同。

如何设置左侧网格列的高度而不是硬编码？

我现在 UI 的截图：

编辑：

添加到下面的答案中。我以前曾尝试过相同的 display flex 想法，但没有奏效。我从下面的答案中添加的一件事是固定显示 flex 的 css 位置属性。

我的代码现在看起来像这样 -

             <Grid>
              <Grid.Row style={{display: 'flex'}}>
                <Grid.Column style={{margin: '0', padding: '0'}} computer={10} mobile={16} table={16}>
                  <Segment raised inverted style={{padding: '2.5rem 0'}}>
                    <ReactPlayer style={{margin: '0 auto'}} ref={this.ref} url={this.state.videoMeta.link} controls={true} playing={true}/>
                  </Segment>
                </Grid.Column>
                <Grid.Column style={{margin: '0', padding: '0', overflowX: 'hidden', position: 'relative', flexGrow: 1}} computer={6} mobile={16} table={16}>
                  <Segment basic>
                    <Header><strong>Timestamps:</strong>  </Header>
                    <List relaxed style={{position: 'absolute'}}>
                      {_.keys(this.state.videoMeta.timestamps).map(ts => (
                        <List.Item className='clickable' onClick={() => this.forward(this.state.videoMeta.timestamps[ts])}>
                          <List.Icon name='video' size='fullscreen' verticalAlign='middle'/>
                          <List.Content>
                            <List.Header style={{textTransform: 'capitalize'}}>{ts}</List.Header>
                            <List.Description>{this.state.videoMeta.timestamps[ts]}</List.Description>
                          </List.Content>
                        </List.Item>
                      ))}
                    </List>
                  </Segment>
                </Grid.Column>
              </Grid.Row>
            </Grid>

请注意容器标记位置 relative 的 css 属性和右侧内部元素的位置 absolute。没有位置属性显示 flex 不起作用。

Answer 1

我没有反应或语义方面的经验-ui，但您可以在 css 中使用 flexbox 和一些巧妙的定位来做到这一点。这是一个简单的示例，您应该希望能够适应您自己的代码。左栏内容固定大小，右栏等高，高则滚动

.container {
  display: flex;
}

.right-col {
  overflow-y: auto;
  flex-grow: 1;
  position: relative;
}

.right-col ul {
  position: absolute;
}

/* -- The following css is just for demo purposes: -- */
.content {
  height: 100px;
  width: 200px;
  background-color: purple;
}
.container {
  border: 2px solid black;
}
.left-col {
  border: 2px solid blue;
}
.right-col {
  border: 2px solid green;
}

<div class="container">
  <div class="left-col">
    <div class="content"></div>
  </div>
  
  <div class="right-col">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

使用左侧高度设置右侧高度

Set height of right hand side using height of left hand side

css

reactjs

semantic-ui-react