实现这一点的一个简单方法是使用 flex . 你有一个单一的维度布局，所以它是完美的适合。

• 编辑-看看其他答案，我可能误解了你，写的是垂直轴，而不是水平轴。没有特别提到。

.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>

.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>

是的，您可以获得父元素的高度&javascript中中间元素的高度，然后选择其他两个div，并给它们剩余部分的百分比，以获得元素的高度：document.getelementbyid（'myid'）。越界
设置文档的高度。getelementbyid（“otherid”）。style.height=所需的高度