Question

我正在尝试创建一个位于论坛左侧的div，并填充浏览器窗口高度的100％。滚动时它也会保持固定位置。

到目前为止我的代码在Chrome和FF中运行得很好;但是，在IE中，当您继续向下滚动页面时，滚动条会随着页面的增长而扩展。

#sidebar {
   background-color: #a75143;
   width: 240px;
   height: 100%;
   position: fixed;
   _position:absolute;
   top: 0;
   _top:expression(eval(document.body.scrollTop));
   left: 0;
   bottom: 0;
}

我知道导致它的原因 - _top：expression（eval（document.body.scrollTop））; - 但这也是将div保持在IE中固定位置的原因。

此外，溢出：隐藏无效。

如果您想了解我在说什么，请在Internet Explorer中打开this page。

任何帮助将不胜感激。谢谢！

Answer 1

即使是IE，也不需要那个表达。

以下对我来说很好......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>

    <style type="text/css">
        #sidebar {
           background-color: #a75143;
           width: 240px;
           height: 100%;
           position: fixed;
           top: 0;
           left: 0;
           bottom: 0;
        }
    </style>

</head>

<body>
    <div id="sidebar"></div>
</body>
</html>

Answer 2

我能够在我的论坛上使用一些条件CSS和无效声明来解决这个问题。但是，Jeremy的解决方案最适合在ProBoards之外。

html, body { height: 100%; }
#sidebar {
   background-color: #a75143;
   width: 240px;
   height: 100%;
   position: fixed;
   _position:absolute;
   top: 0;
   _top:expression(eval(document.body.scrollTop));
   left: 0;
   bottom: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
#sidebar-container { min-height: 100%; overflow: hidden; }
</style>
<![endif]-->

<div id="sidebar-container">
   <div id="sidebar">
      some content
   </div>
</div>

固定，100％高度div导致窗口增长

2 个答案: