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。

在另外两个之间拉伸（垂直）中间div

1 个答案: