父容器中的 3 个 div，它们应动态更改高度，但它们的高度应始终加起来为相同的总高度 [重复]答案

【问题标题】：3 divs in a parent container, they should dynamically change height but their heights should always add up to the same total height [duplicate]父容器中的 3 个 div，它们应动态更改高度，但它们的高度应始终加起来为相同的总高度 [重复]
【发布时间】：2021-07-27 09:00:53
【问题描述】：

我试图将 3 个 div 放在一个父 div 中，父 div 有一个固定的高度（比如说 300 像素）。中间 div 具有可变高度，我希望其他 2 个 div 动态调整它们的高度，以便总高度始终为 300px。有解决办法吗？

【问题讨论】：

只用 display:flex;它会帮助你。并把最小高度 300px 不要限制其他 div 高度。
@AndrewL64 不是真的

标签： javascript html css sass frontend

【解决方案1】：

 .parentDiv{
      background-color: #999;
      display:flex;
      height:300px;
      justify-content: space-between;
      align-items: stretch;
    }
    .childDiv{
      background-color: #fff;
      border: 1px solid red;
      flex: 1 1 0;
    }

<div class="parentDiv">
    <div class="childDiv"></div>
    <div class="childDiv">
      Hi, this is default text. It can be increase accordingly
    </div>
    <div class="childDiv"></div>
  </div>

【讨论】：

【解决方案2】：

是的，您可以在 javascript 中获取父元素的高度和中间元素的高度，然后选择其他两个 div 并为它们提供例如剩余部分的百分比，获取元素的高度：document.getElementById('myID')。偏移高度

设置高度 document.getElementById("otherID").style.height = 你想要的

【讨论】：

【解决方案3】：

实现此目的的一种简单方法是使用flex。您有一个单维布局，因此非常适合。

*edit - 查看其他答案，我可能误解了您并写了垂直轴，而不是水平轴。没有特别提到。

.parent {
  /* We use vertical flex direction so we can utilize the flex property */
  display: flex;
  flex-direction: column;

  height: 300px;
}

.children {
  /* All should grow or shrink and take as much as possible.*/
  flex: 1 1 auto; 
  
  background: yellow;
}

.auto {
  /* No need to grow or shink specifically.*/
  flex-grow: 0;
  
  background: red;
  color: white;
}

<h2>One line text:</h2>
<div class="parent">
  <div class="children"></div>
  <div class="children auto"><p>I am a paragraph.</p></div>
  <div class="children"></div>
</div>

<h2>Long text:</h2>
<div class="parent">
  <div class="children"></div>
  <div class="children auto"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
  <div class="children"></div>
</div>

【讨论】：

感谢您的回答，真的很有帮助。有没有办法让我始终将中间 div 的垂直中心保持在父 div 的垂直中心？