对于屏幕上的3个元素（页眉、正文、页脚）列(100VH)，我希望页眉固定在顶部，页脚固定在底部，然后正文占据中间的所有空间（中间空间）。请注意，页眉和页脚也可以是任何大小（文本或图像），所以我无法预先确定它们的高度。

身体大小是事先未知的，例如它可以是显示电子邮件的区域。如果身体尺寸小于中间空间（只是几封邮件），就会把它都拿走。如果它更大（许多电子邮件），它应该把它所有，但不展开页面，将页脚一直向下推到只有滚动到底部时才能看到。也就是说，我希望每个元素都是固定在顶部/中间/底部的独立部分，中间部分占据所有中间空间，而不管它是大是小。

我在codepen上使用了Flexbox和绝对定位。

正文中有一些注释掉的项可以扩展和收缩正文。

为了让flexbox正文占据所有空间，我有，但当正文大于中间空间时，就展开正文并向下推页脚。我不知道如何让身体膨胀以占据中间空间，但无论大小都固定在那个高度。

绝对位置版本在这里工作。在页眉和页脚之后给正文一个高度，并把它放在页眉的正下方。制作页眉和页脚将它们固定在顶部和底部，而不考虑主体大小。这里的问题是，我分配了一些固定高度的页眉和页脚，但我希望他们是不固定的（自动）。我希望布局标题能够显示文本（因此可能30px高）或图像（可能100px高）。

请指教。我能想到的唯一且唯一的解决方案是使用JS读取绝对定位版本中的页眉和页脚高度。但是如果可能的话，我想使用纯CSS。

顺晟科技：

以下是一个仅使用CSS的解决方案: