获取一个DIV包装器，用CSS填充整个页面

Question

我有一个由几个DIvs，顶部的导航栏，底部的页脚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了，看看是否有帮助。