Html IE6中的固定页面布局

页眉、页脚和侧边栏有固定的位置。在中间有一个包含两个滚动条的内容区域。浏览器上没有外部滚动条。我有一个在IE7和FF中工作的布局。我需要添加IE6支持。我怎样才能做到这一点

这里是我当前CSS的近似值

布局
* {
边际：0px；
填充：0px；
边界：0px；
}
.样本边界{
边框：1px纯黑；
}
#标题{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
高度：60px；
}
#左侧边栏{
位置：绝对位置；
顶部：65px；
左：0px；
宽度：220px；
底部：110px；
}
#右侧边栏{
位置：绝对位置；
顶部：65px；
右：0px；
宽度：200px；
底部：110px；
}
#页脚{
位置：绝对位置；
底部：0px；
左：0px；
右：0px；
高度：105px；
}
@媒体屏幕{
#内容{
位置：绝对位置；
顶部：65px；
左：225px；
底部：110px；
右：205px；
溢出：自动；
}
正文#左侧边栏，
正文#右侧边栏，
阀体#封头，
正文#页脚，
正文内容{
位置：固定；
}
}

对您的项目来说可能有些过分，但是。

试试IE7.js。应该在不做任何修改的情况下解决您的问题

---

链接：

将以下代码添加到

---

将

ie6fixed

CSS类添加到任何您想要的

position:fixed
这些答案很有帮助，它们确实让我在IE6中添加了有限形式的固定定位，但是如果我为侧边栏指定了顶部和底部css属性（这是我需要的行为），这些答案都无法修复破坏IE6布局的错误

因为不能指定顶部和底部，所以我使用了顶部和高度。高度属性被证明是非常必要的。我使用javascript重新计算页面加载时的高度，并调整页面大小

下面是我添加到测试用例中以使其工作的代码。使用jQuery可以更简洁

<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
  height: 455px;
}
body>div.ie6-autowidth {
  right: ;
  width: 530px;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<script type="text/javascript">

function fixLayout() {
   if (document.documentElement.offsetWidth) {
      var w = document.documentElement.offsetWidth - 450;
      var h = document.documentElement.offsetHeight - 175;
      var l = document.getElementById('left-sidebar');
      var r = document.getElementById('right-sidebar');
      var c = document.getElementById('content');

      c.style.width = w;
      c.style.height = h;
      l.style.height = h;
      r.style.height = h;
   }
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->

查看下面的纯css黑客。。。有些需要将其强制进入“怪癖”模式（我认为这是最健壮的），但所有操作都非常有效：



我用这个效果很好，希望对你有帮助

<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
  height: 455px;
}
body>div.ie6-autowidth {
  right: ;
  width: 530px;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<script type="text/javascript">

function fixLayout() {
   if (document.documentElement.offsetWidth) {
      var w = document.documentElement.offsetWidth - 450;
      var h = document.documentElement.offsetHeight - 175;
      var l = document.getElementById('left-sidebar');
      var r = document.getElementById('right-sidebar');
      var c = document.getElementById('content');

      c.style.width = w;
      c.style.height = h;
      l.style.height = h;
      r.style.height = h;
   }
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->