CSS全屏布局，顶部菜单和内容填充剩余的屏幕空间

Question

我希望将此结果作为我的网络应用布局实现：

我首先创建移动使用应用程序。我想修复这个菜单底部的内容和内容的顶级菜单。内容高度可能很长，但我想使用overflow-y: auto;。我对容器使用CSS display: table;，为菜单和内容使用display: table-row;来解决此问题。 JSFiddle示例here。

我应该期待哪些利弊？即移动浏览器的互操作性，性能问题等。

Answer 1

我有同样的问题，我用与你完全相同的方式解决了这个问题。我遇到的唯一问题是底部的行：

#content {
    display: table-row;
    height: 100%;
}

IE不会尊重这个，它会看到高度：100％;而不是像所有其他浏览器一样占用表的剩余空间，它将等于整个表的100％，导致您的布局错误地呈现。我发现解决这个问题的唯一方法是使用一些带有窗口大小调整功能的jquery来基本上只在它的IE时触发并根据它应该的值将一个像素值高度应用到#content。