在我之前的回答中,我是绝对错误的(没有双关语),因为你不能同时指出两者
top
和
bottom
在IE6中,两者都不是
left
和
right
. 此外,您不知道ContentDiv的确切宽度和高度,也不知道它们在视区中的百分比。
当我解决这个问题时,我把IE调到怪癖模式,以获得
border-box box model
(也见)
W3C spec
)要对更符合标准的浏览器使用相同的CSS规则,可以使用
box-sizing
属性(和变量)。完成此操作后,边框进入内容,您可以通过指定边框(宽度)将内容向下和向右推
和
风格:
<!-- put IE in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE6 'frames'</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
#top {
position: absolute;
top: 0;
width: 100%;
background-color: #ddd;
height: 100px;
z-index: 2;
}
#left {
position: absolute;
left: 0;
border-top: 100px solid; /* move everything below #top */
background-color: #bbb;
width: 120px;
height: 100%;
overflow: hidden;
z-index: 1;
}
#main {
position: absolute;
border-top: 100px solid;
border-left: 120px solid;
width: 100%;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="top">Title</div>
<div id="left">LeftNav</div>
<div id="main">
<p>
Lorem ipsum ...<br />
<!-- just copy above line many times -->
</p>
</div>
</body>
</html>
更新:
在IE>=7及更多符合标准的浏览器中,您可以使用
position: fixed
和两者一起
顶部
和
底部
(等)规则。有一种方法可以在标准模式(或者更确切地说,
Almost Standards Mode
使用
CSS expressions
. 这样,可以让JScript引擎计算正确的宽度和高度值(在条件注释之间添加)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>'Frames' using <div>s</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#top, #left, #main {
position: fixed;
overflow: hidden;
}
#top {
top: 0;
width: 100%;
background-color: #ddd;
height: 100px;
}
#left {
left: 0;
top: 100px; /* move everything below #top */
bottom: 0;
background-color: #bbb;
width: 120px;
}
#main {
top: 100px;
left: 120px;
bottom: 0;
right: 0;
overflow: auto;
}
</style>
<!--[if IE 6]>
<style>
#top, #left, #main {
position: absolute;
}
#left {
height: expression((m=document.documentElement.clientHeight-100)+'px');
}
#main {
height: expression((m=document.documentElement.clientHeight-100)+'px');
width: expression((m=document.documentElement.clientWidth-120)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="top">Title<br /></div>
<div id="left">LeftNav<br /></div>
<div id="main">
<p>
Lorem ipsum ...<br />
<!-- just copy above line many times -->
</p>
</div>
</body>
</html>
也就是说,我不推荐这种方法。它会显著降低已经不是太快的IE6的浏览体验,如
these expressions are evaluated many times
.
还有一点需要注意:我想您最终会使用外部样式表(和脚本),但是如果您想将它们嵌入到XHTML文档中,请使用适合所用脚本或样式语言的CDATA标记和注释,如David Dorward所述。
recommends
.
