在其他两个之间拉伸（垂直）中间 div

Question

有没有办法拉伸中间 div，使其填充其他两个（页眉，页脚）之间的剩余空间，高度有限。这三个都放置在覆盖 100% 视口空间的父元素中。条件是所有三个 div 都必须相对于它的内容，但有限制（max-height）（中间的除外），所以没有绝对定位；它们必须具有相同的父元素。我确实发现虽然类似的解决了problem，但是使用了一个表结构，这不是我要寻找的，但具有我想应用于我的概念的完全相同的行为。

这里是codepen，但我还没有弄清楚如何解决它。还有一点，我不想用JS。

更新 同样不用flexbox,calc(),tables;

Answer 1

CSS 表格（不是实际表格）

body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: table;
  width: 100%;
}
header,
footer {
  max-height: 25vh;
  display: table-row;
  background: lightblue;
}
main {
  height: 100%;
  background: pink;
  display: table-row;
}

<div class="parent">
  <header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus quod, odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident, magnam sed, ipsam pariatur.</p>
  </header>
  <main>
    <p>content</p>
  </main>
  <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sed eligendi quibusdam voluptatibus consequatur cum, velit illo. Aperiam similique laudantium praesentium veniam repellat consequuntur et!</p>
  </footer>
</div>

Support 至少支持 IE8。

但是，我不能推荐此解决方案，但鉴于 OP 对此设置的异常限制，这是唯一剩下的 CSS 解决方案 AFAIK。