定位div，滚动条退出浏览器视口

Question

我有一个具有可滚动内容的div，但重要的是这个div相对于浏览器顶部的边距为36px，或绝对位于顶部。

div填充浏览器视口的高度也很重要。

我的问题是div的滚动条的底部不能被看到，因为它被推下了36px。内容也被推下来，但我已经能够通过在底部添加填充来解决这个问题。这适用于所有浏览器。有没有办法让这个div有一个适合浏览器视口的滚动条，它考虑了顶部div的边距？

如果我使用margin-top绝对或相对地定位div，结果是相同的：36px;

这个div的css如下：

div.#panel1 {
   position: absolute;
   top: 36px; 
   right: 0;
   overflow: auto;
   background: #636362;
   padding: 0 0 20px 0px;
   width: 290px;
   height: 100%;
}

此外，我发现IE 7中的滚动体验对于这个div来说真的很慢而且生涩，但浏览器的滚动条很好吗？我应该知道一个错误吗？

Answer 1

绝对定位时，您可以同时设置top和bottom：http://jsfiddle.net/kizu/xSgTW/

因此，如果您未设置height并设置

top: 36px;
bottom: 0;

然后div的顶线将位于36px，底部位于底部。

关于滚动：可能会有很多因素影响IE中的滚动速度，但AFAIR使用overflow: auto滚动块总是慢于滚动body。