Position: fixed. CSS hack. Without frames and scripts. IE, Opera, Mozilla

Идея: Eric Bednarz devnull.tagsoup.com

Ничего сверхестественного вы здесь не найдёте. ;) Просто сведение воедино двух вещей, описанных Эриком Беднарзом. Всё построено на position: absolute, игре с overflow и трюками для подсовывания нужных свойств нужным бродилкам.

Вполне возможно, что это не последняя версия кода. ОтЛаживание — по мере необходимости.

IE 6; Opera 6+; Mozilla 1.2; Mozilla Firebird 0.6.

Примечание. Если вы уже начали баловаться размерами окна и увидели горизонтальную полосу и всякие гадости, то знайте, что произошло это из-за использования тега <pre>. Ручками расставлять   мне просто лень.

<?xml version="1.0" encoding="Windows-1251" ?>
<!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" xml:lang="ru" lang="ru">
<head>
<title>CSS position: fixed. Without frames</title>
<style type="text/css">
body
  {
  margin: 0;
  padding: <Bar 1 height> 0 0 0;
  background-color: #eee;
  color: #000;
  }
div.content
  {
  margin: 0 0 0 <Bar 2 lenght>;
  }
div.fixed1
  {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: <Bar 1 height>;
  }
div.fixed2
  {
  position: absolute;
  top: <Bar 1 height>;
  left: 0;
  width: <Bar 2 lenght>;
  height: 150%;		/* Обход бага в Opera6 */
  }
@media screen
  {
  body>div.fixed1, body>div.fixed2
    {
    position: fixed;
    }
  }
</style>
<!--[if IE]>
<style type="text/css">
body
  {
  overflow-y: hidden;
  }
div.content
  {
  height: 100%;
  overflow: auto;
  }
</style>
<![endif]-->
</head>
<body>

	<div class="content">
	  [...content...]
	</div>
	<div class="fixed1">
	  [...fixed bar 1...]
	</div>
	<div class="fixed2">
	  [...fixed bar 2...]
	</div>

</body>
</html>