Блог

Я использую semanti-UI-react. Пользовательский интерфейс, которого я хочу достичь, — это модальный, который разделен по вертикали на 2 части. В левой части отображается видео, а в правой-временные метки и описания индексов видео. Моя правая сторона с индексами должна быть прокручиваемой.

 lt;Gridgt;  lt;Grid.Rowgt;  lt;Grid.Column style={{margin: '0', padding: '0'}} computer={10} mobile={16} table={16} gt;  lt;Segment raised inverted style={{ padding: '2.5rem 0'}}gt;  lt;ReactPlayer style={{margin: '0 auto'}} ref={this.ref} url={this.state.url} controls={true} playing={true}/gt;  lt;/Segmentgt;  lt;/Grid.Columngt;  lt;Grid.Column style={{margin: '0', padding: '0'}} computer={6} mobile={16} table={16}gt;  lt;Segment basic style={{overflowX: 'hidden', margin: '0 auto', height: '450px'}}gt;  lt;List relaxedgt;  {_.keys(this.props.videoMeta.timestamps).map(ts =gt; (  lt;List.Item className='clickable' onClick={() =gt; this.forward(this.props.videoMeta.timestamps[ts])}gt;  lt;List.Icon name='video' size='fullscreen' verticalAlign='middle'/gt;  lt;List.Contentgt;  lt;List.Header style={{textTransform: 'capitalize'}}gt;{ts}lt;/List.Headergt;  lt;List.Descriptiongt;{this.props.videoMeta.timestamps[ts]}lt;/List.Descriptiongt;  lt;/List.Contentgt;  lt;/List.Itemgt;  ))}  lt;/Listgt;  lt;/Segmentgt;  lt;/Grid.Columngt;  lt;/Grid.Rowgt;  lt;/Gridgt;  

Это обеспечивает вышеупомянутый пользовательский интерфейс. Но мне пришлось установить жестко заданное значение высоты в моем правом столбце сетки. Если я его не установлю, он не будет прокручиваться. Я попробовал процентные значения, но это делает мою правую сторону другой высоты по сравнению с высотой левой стороны.

Вместо жесткого кодирования, как мне установить высоту для столбца сетки с левой стороны ?

Скриншот моего пользовательского интерфейса прямо сейчас:

Редактировать:

Добавление к ответу ниже. Ранее я уже пробовал ту же идею гибкого дисплея, но она не сработала. Одна вещь, которую я добавил из приведенного ниже ответа, — это свойство позиции css, которое исправило гибкость отображения.

Сейчас мой код выглядит так —

 lt;Gridgt;  lt;Grid.Row style={{display: 'flex'}}gt;  lt;Grid.Column style={{margin: '0', padding: '0'}} computer={10} mobile={16} table={16}gt;  lt;Segment raised inverted style={{padding: '2.5rem 0'}}gt;  lt;ReactPlayer style={{margin: '0 auto'}} ref={this.ref} url={this.state.videoMeta.link} controls={true} playing={true}/gt;  lt;/Segmentgt;  lt;/Grid.Columngt;  lt;Grid.Column style={{margin: '0', padding: '0', overflowX: 'hidden', position: 'relative', flexGrow: 1}} computer={6} mobile={16} table={16}gt;  lt;Segment basicgt;  lt;Headergt;lt;stronggt;Timestamps:lt;/stronggt; lt;/Headergt;  lt;List relaxed style={{position: 'absolute'}}gt;  {_.keys(this.state.videoMeta.timestamps).map(ts =gt; (  lt;List.Item className='clickable' onClick={() =gt; this.forward(this.state.videoMeta.timestamps[ts])}gt;  lt;List.Icon name='video' size='fullscreen' verticalAlign='middle'/gt;  lt;List.Contentgt;  lt;List.Header style={{textTransform: 'capitalize'}}gt;{ts}lt;/List.Headergt;  lt;List.Descriptiongt;{this.state.videoMeta.timestamps[ts]}lt;/List.Descriptiongt;  lt;/List.Contentgt;  lt;/List.Itemgt;  ))}  lt;/Listgt;  lt;/Segmentgt;  lt;/Grid.Columngt;  lt;/Grid.Rowgt;  lt;/Gridgt;  

Обратите внимание на css-свойства позиции relative для тега контейнера и позиции absolute для внутреннего элемента с правой стороны. Без свойства position гибкий дисплей не работал.

У меня нет опыта работы с react или semantic-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; } 

 lt;div class="container"gt;  lt;div class="left-col"gt;  lt;div class="content"gt;lt;/divgt;  lt;/divgt;    lt;div class="right-col"gt;  lt;ulgt;  lt;ligt;Itemlt;/ligt;  lt;ligt;Itemlt;/ligt;  lt;ligt;Itemlt;/ligt;  lt;ligt;Itemlt;/ligt;  lt;ligt;Itemlt;/ligt;  lt;ligt;Itemlt;/ligt;  lt;ligt;Itemlt;/ligt;  lt;/ulgt;  lt;/divgt; lt;/divgt;