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

Question

我想在我的网络应用布局中实现这一结果：

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

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

Answer 1

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

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

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