gpt4 book ai didi

html - IE6 中的 2 列全高布局

转载 作者:行者123 更新时间:2023-11-27 22:52:30 24 4
gpt4 key购买 nike

所以我试图在 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 中有一个怪癖导致 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com