Question

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

以下是完整的要求：

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

NavBar是EM中的设定高度（比如2em）
菜单是EM中的设置宽度（例如10em）并填充到页面底部
应该没有全局页面滚动条
菜单必须滚动到位而不是覆盖导航栏（如溢出：滚动）
content是一个填充可用空间的iFrame。
布局必须能够在浏览器中重现

我已经尝试了css，但是它导致了大量的CSS，我仍然无法让iframe正确填充空间。
我试过桌子，但我不能让菜单以正确的方式滚动。
我唯一的解决方案是框架，但这不是我想要的路线。

解决方案：
所以经过大约36个小时的抨击，我终于找到了解决方案。我能让它工作的唯一方法是使用基于表格的布局。但是，Firefox中的一个怪癖导致高度：100％的计算方式与其他浏览器的计算方式不同，因此我还必须添加位置：固定样式。 IE6主要忽略了这一点，后者依赖于基于表格的布局。

最终布局的一个例子可以在这里看到：http://lynet.ca/~alumb/working.html

Answer 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，请确保设置了doc类型。例如，将其插入HTML文件的顶部：

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

Answer 2

特别是垂直与CSS混合尺寸很困难。导航栏高2英尺，菜单是100％ - 2周高 - 这个最后的高度很难用纯CSS做。您可能需要使用JavaScript计算它。

另一种解决方案是使页面的行为类似于普通网页的设计（全部滚动为一个整体）。以下是可能有用的示例布局：Left menu layout (em widths)

IE6中的2列全高布局

2 个答案: