IE6中的2列全高布局答案

【问题标题】：2 column full height layout in IE6IE6中的2列全高布局
【发布时间】：2010-10-15 20:06:07
【问题描述】：

所以我试图在 IE6 中复制它：http://lynet.ca/~alumb/layout.html
它在 FF 和 Chrome 中完美运行，但在 IE6 中惨遭失败。有什么建议吗？

这是完整的要求：

+-----------------------------+
| NavBar                      |
|-----------------------------|
|Menu | Content               |
|     |                       |
|     |                       |
|     |                       |
|     |                       |
|     |                       |
|     |                       |
+-----------------------------+

NavBar 是 EM 中的设定高度（例如 2em）
菜单是 EM 中的设置宽度（例如 10em），并填充到页面底部
不应有全局页面滚动条
菜单必须在原地滚动并且不能覆盖导航栏（如overflow:scroll）
content 是填充可用空间的 iFrame。
布局必须能够适应浏览器的调整

我已经尝试过 css，但它导致 css 的数量非常多，我仍然无法让 iframe 正确填充空间。
我尝试过表格，但无法让菜单以正确的方式滚动。
我唯一的解决方案涉及框架，但这并不是我真正想要的路线。

解决方案：
因此，经过大约 36 个小时的抨击，我终于有了一个解决方案。我可以让它工作的唯一方法是使用基于表格的布局。但是，Firefox 中有一个怪癖，导致 height:100% 的计算方式与其他浏览器不同，因此我还必须添加 position:fixed 样式。 IE6 大多忽略了这一点，它依赖于基于表格的布局。

可以在此处查看最终布局的示例：http://lynet.ca/~alumb/working.html

【问题讨论】：

标签： html css layout internet-explorer-6

【解决方案1】：

解决方法很简单。使用绝对定位。

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#NavBar {
}


#Menu, #Content {
    position: absolute;
    top: 3em;
    bottom: 0;
    overflow: auto;
}

#Menu {
    width: 10em;
}

#Content {
    overflow: hidden;
    left: 10em;           /* #menu.width */
    right: 0;
}

iframe {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

要让 IE 正常工作，请确保您设置了文档类型。例如，在 HTML 文件的顶部插入：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

【讨论】：

@alumb，又一次更新（正文溢出）。我认为问题是由 iframe 的边框引起的。
@strager，我不认为我看到了你所看到的。我看到了这个：lynet.ca/~alumb/strager.jpg。 “底部”一词应位于页面底部。我还更新了 strager.html 文件。感谢您的帮助。
@alumb，Grr，我没有像我应该的那样在 IE 中进行测试。更新了答案。
@strager，好的，现在我遇到了一些奇怪的问题，在 IE6 中，如果 iframe 的位置设置为绝对，则 iframe 会完全消失。
@strager，这是一个 hasLayout 问题。我必须设置#content 和body 的高度和宽度。但是，iframe 的 100% 高度仍然是相对于 body 而不是 #container 从而溢出页面。

【解决方案2】：

很难用 CSS 混合尺寸，尤其是垂直方向。导航栏是 2 ems 高，菜单是 100% - 2ems 高 - 这最后的高度很难用纯 CSS 做。您可能需要使用 JavaScript 计算它。

另一种解决方案是使页面表现得像设计的普通网页一样（所有滚动一体）。这是一个可能有帮助的示例布局：Left menu layout (em widths)

【讨论】：

由于各种原因，我无法做到这一点，尽管我想这样做。这组要求是固定的。