获取DIV包装器以使用CSS填充整个页面

Question

我的布局由几个DIv组成，顶部是导航栏，底部是页脚dv，两者之间有一个名为#frame的包装器来保存内容。

<div id="nav">
 navbar
</div>

<div id="frame">
 Content
</div>

<div id="footer">
 (c) 2010 MySite.com
</div>

#frame中的内容显然会因页面而异，我想确保即使#frame中只有几行，它也会填满整个屏幕并确保#footer始终在休息在页面的底部。尝试height:100%最终会添加垂直滚动条，因为页眉和页脚占用了额外的高度，我肯定也想避免这种情况。

我目前正在通过使#frame的CSS高度达到89％来解决这个问题，但我知道这是一个丑陋的黑客攻击，如果我更改页眉和/或页脚会破坏。有人知道更优雅的方法吗？

Answer 1

如果您的页脚很简单，就像示例中那样，那么您很幸运。当您知道页脚的高度时，无论是在px还是em中，您都可以将它放在页面底部，并将底部填充的页脚高度添加到#frame。如果页脚非常流畅，那么你将无法将其强制下来，并且没有适合你所描述的布局的优雅解决方案（Flexbox会在WebKit和Gecko上执行;只需等到IE赶上）。

Answer 2

我刚才在这艘船上，检查This Link，看看是否有帮助。