Question

我有两个容器需要分享父亲的身高，但第二个容器是按需动态添加的。两个容器中都可以有很多内容，因此必须给出滚动的机会。

我有一个50/50份额的工作解决方案，但我想知道是否可以动态分享高度。

.wrapper__container {
  display: flex;
  height: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
}

.inside__container {
  flex: 0 0 100%;
  max-width: 100%;
  overflow-y: auto;
}

包装器组件渲染方法的一部分：

render() {
  const maxHeight = this.state.showDetails ? '50%' : '100%';
  const minHeight = this.state.showDetails ? '50%' : '100%';
  return (
    <div className="wrapper__container">
      <Config 
        itemsGreen={this.state.itemsGreen}
        itemsRed={this.state.itemsRed}
        changeItemCount={this.changeItemCount}
      />
      <Container
        itemCount={this.state.itemsGreen}
        className="inside__container"
        style={{
          backgroundColor: 'green',
          maxHeight,
          minHeight
        }}
        onClick={this.handleClick}
      />
      {this.state.showDetails && <Container
        itemCount={this.state.itemsRed}
        className="inside__container"
        style={{ 
          backgroundColor: 'tomato',
          maxHeight,
          minHeight
        }}
      />}
    </div>
  )
}

我已经设置了codepen，您可以在其中更改项目数以测试行为。单击绿色容器以显示红色容器。

至少将绿色容器限制在最大高度50％并让红色容器占用其余部分是一个很好的解决方案。例如，如果绿色仅为20％，则红色可以占80％。

在一个完美的世界中，如果没有js计算，这应该是可能的，但如果有人有想法计算这个（只有反应/香草）。

目标浏览器是IE11。

修改：添加了一个新的Pen，但是只有少数项目时会显示所需的灵活行为。

Answer 1

每次渲染外部容器时，您需要获取容器的高度并将其除以2，然后将该数字应用为每个内部div的高度。像这样（使用jquery）：

var $two = $('<div id="two"></div>');
var $three = $('<div id="three"></div>');
$('#container').append($two);
$('#container').append($three);
var h = $('#one').height();
console.log((h/2)-1)
if($('#two').height() < ((h/2)-1)) {
  $('#three').height( ( h-$('#two').height() ) - 1 );
} else {
   $('#two').height((h/2)-1);
   $('#three').height((h/2)-1);
}

两个容器动态共享垂直高度

1 个答案: