В моем предыдущем ответе я был абсолютно неправ (не каламбур), так как вы не можете указать ни top и bottom в IE6, ни оба left и right. Кроме того, вы не знаете точную ширину и высоту содержимого div, а также не знаете их в процентах от области просмотра.
Когда я решил это, я перевел IE в режим причуд, чтобы получить рамочную модель (см. Также 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 вместе с правилами top и bottom (и др.). Есть способ получить этот похожий на фрейм внешний вид в IE6 в стандартном режиме (точнее, почти в стандартном режиме ), используя CSS-выражения . Таким образом, вы можете позволить движку 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, так как эти выражения оцениваются много раз .
Еще одна заметка: я полагаю, что в конце вы будете использовать внешние таблицы стилей (и скрипты), но если вы хотите встроить их в документ XHTML, используйте «маркеры и комментарии CDATA, подходящие для скрипта или языка стилей» используется », а Дэвид Дорвард рекомендует .