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

Question

我想在我的网络应用程序布局中实现该结果:

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

我应该期待哪些优点和缺点？ IE。移动浏览器互操作性、性能问题等。

Answer 1

我遇到了完全相同的问题，并且我以与您完全相同的方式解决了它。我遇到的唯一问题是底部的行:

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

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