如何根据其中一个的大小调整div高度并覆盖100％？

Question

我有一个主要div覆盖网页中100％的可用空间，它包含三个其他div，如下所示：

<div id="container">
    <div id="header"/>
    <div id="content"/>
    <div id="footer"/>
</div>

我需要其中两个（黄色的）可调整大小，因为它们的内容是动态的，有时需要多行文本。所以，我需要的是它们覆盖了20％的可用空间，但是如果它们需要更多来调整大小并使中心div更小。我应该读什么？我找不到谷歌的关键词。非常感谢！ This is a "not-working demo"哈哈：

Answer 1

在页眉和页脚div上使用CSS min-height属性，并从内容div中删除height属性。

#header, #footer {
   min-height: 20%;
}

Answer 2

我不相信这些答案正在理解这个问题。

如果我告诉你，你想要让顶部和底部都达到最小高度（比如每个20％），中心填充其余部分。

在这种情况下，您将不得不使用JavaScript。找到window的高度，并将top和bot设置为最小高度。这将允许他们扩展。从那里你将获得头部和脚的高度，从window的高度减去它们，并将内容区域设置为该高度。

我会写出一个例子，但听起来你想自己做，我赞扬。