固定，100% 高度 div 导致窗口增长答案

【问题标题】：Fixed, 100% height div Causing Window to Grow固定，100% 高度 div 导致窗口增长
【发布时间】：2012-09-14 05:19:38
【问题描述】：

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

到目前为止，我的代码在 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 中保持固定位置的原因。 p>

另外，overflow:hidden 没有任何作用。

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

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

【问题讨论】：

你的 CSS 内嵌的 JavaScript 和以下划线开头的 CSS 是怎么回事？
annevankesteren.nl/test/examples/ie/position-fixed.html 在 Internet Explorer 中进行修复工作的唯一方法。
jigsaw.w3.org/css-validator/…
是的，真的不在乎它是否有效/黑客，我只想让它工作。

标签： html css scroll height fixed

【解决方案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>

【讨论】：

你的意思是下划线声明吗？否则固定定位不起作用。我正在寻找一种停止滚动条的方法。
你的意思是根本没有滚动条？我只是看到一个禁用的滚动条，但是您无法滚动它。
将补充说我目前正在 IE7 中测试它，因为我今天一直在研究的东西支持 IE7（呃）。刚查了IE8，完全没有滚动条。
这对我不起作用。不仅 div 不固定，而且它也不是 100% 的浏览器窗口。如果您想查看它，它是实时的。 timberwoodhighs.proboards.com/index.cgi
我认为您还有其他冲突，您的页面也不适合我。您是否尝试过将我上面粘贴的代码转换为一个平面 html 文件并快速打开它？

【解决方案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>

【讨论】：