所以我试图在 IE6 中复制这个:http://lynet.ca/~alumb/layout.html
它在 FF 和 Chrome 中完美运行，但在 IE6 中惨败。有什么建议吗？
以下是完整的要求:
+-----------------------------+
| NavBar |
|-----------------------------|
|Menu | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+-----------------------------+
- NavBar 是 EM 中的设定高度(例如 2em)
- 菜单的宽度以 EM 为单位(例如 10em)，并填充到页面底部
- 不应该有全局页面滚动条
- 菜单必须滚动到位，并且不能覆盖导航栏(如溢出:滚动)
- 内容是一个 iFrame，填充了全部可用空间。
- 布局必须在浏览器关闭后仍然存在
我尝试过 css，但它会导致大量的 css，而且我仍然无法让 iframe 正确填充空间。
我尝试过表格，但无法让菜单以正确的方式滚动。
我唯一的解决方案涉及框架，但这并不是我真正想要走的路线。
解决方案:
经过大约 36 个小时的努力，我终于找到了解决方案。我可以让它工作的唯一方法是使用基于表格的布局。然而，Firefox 中有一个怪癖，导致 height:100% 的计算方式与其他浏览器不同，因此我还必须添加position:fixed 样式。 IE6 基本上会忽略这一点，IE6 会退回到基于表格的布局。
最终布局的示例可以在此处查看:http://lynet.ca/~alumb/working.html
最佳答案
解决方案很简单。使用绝对定位。
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">
关于html - IE6 中的 2 列全高布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/687992/