Html IE6中的2列全高布局
所以我试图在IE6中复制这一点：Html IE6中的2列全高布局,html,css,layout,internet-explorer-6,Html,Css,Layout,Internet Explorer 6,所以我试图在IE6中复制这一点： 它在FF和Chrome中工作得很好，但在IE6中却失败得很惨。有什么建议吗 以下是一整套要求： +-----------------------------+ | NavBar | |-----------------------------| |Menu | Content | | | | | |
它在FF和Chrome中工作得很好，但在IE6中却失败得很惨。有什么建议吗 以下是一整套要求：
+-----------------------------+
| NavBar |
|-----------------------------|
|Menu | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+-----------------------------+
- 导航栏是一个以EM为单位的设定高度（例如2em）
- 菜单是以EM（比如10em）为单位设置的宽度，填充到页面底部
- 应该没有全局页面滚动条
- 菜单必须滚动到位，且不能覆盖导航栏（如溢出：滚动）
- 内容是一个iFrame，它填充了可用的全部空间
- 布局必须在调整浏览器大小后仍然有效
我尝试了表格，但无法使菜单以正确的方式滚动。
我唯一的解决方案是帧，但这并不是我真正想要的路线
解决方案：
所以经过36个小时的抨击，我终于找到了解决办法。我唯一能做到这一点的方法是使用基于表的布局。然而，Firefox中有一个怪癖导致高度：100%的计算方式与其他浏览器不同，因此我还必须添加位置：固定样式。IE6基本上忽略了这一点，它依赖于基于表格的布局
这里可以看到一个最终布局的示例：很难将维度（尤其是垂直方向）与CSS混合。导航栏的高度为2毫秒，菜单的高度为100%-2毫秒-纯CSS很难达到最后的高度。您可能需要使用JavaScript进行计算
另一种解决方案是使页面的行为类似于设计的普通网页（所有页面都在一块中滚动）。下面是一个可能有用的布局示例：解决方案很简单。使用绝对定位
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%;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">