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

Question

我正在尝试创建一个div，该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中打开此页面 。

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

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>