当设置bottom CSS属性时，CSS overflow滚动条的位置不正确

Question

我有一个div，其中底部的图片占用了26像素的空间。CSS设置在需要时显示垂直滚动条，但我需要确保滚动条不重叠到我的页脚区域，所以我使用bottom:26px;将其上移。然而，当这种情况发生时，滚动条被向上移动，我无法看到内容的顶部或滚动条的顶部箭头。我不确定需要更改什么CSS来修复它，使滚动条位于最顶部，并在底部留下26像素的间距以适应我的图片。感谢您的帮助。

HTML

<div id="channel-container">
<div id="channel">

</div></div>

CSS

#channel {
color: #FFFFFF;
text-align: left;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
bottom: 26px;
}
#channel-container {
float: right;
width: 31%;
height: 100%;
}

- Ed R

Answer 1

考虑重新构建您的HTML。如果div应该滚动，但页脚不应该，则我不会将它们分组在一起。在页脚上设置margin/padding为0，在可滚动div的底部也是如此。它们应该无缝地融合在一起。这还消除了使用绝对位置和底部值的需要。

这里是我认为您想要的示例。http://jsfiddle.net/vdZ6R/

<div id="container">
  <div id="scrollablediv"></div>
  <div id="footer"><img src="" /></div>
</div>

- mrtsherman

---

可以这样做，但我需要可滚动的 div 高度为 100% 减去页脚大小（26px），这样如果用户调整浏览器大小，它就会是流体的。 - Ed R

我不太明白你想要什么。你能发一张图片吗？ - mrtsherman

在右侧，jQuery按钮“频道、好友、氏族”是我的页脚。它上面的整个区域都是可滚动的部分。它需要是浏览器高度减去底部的26像素。因此，无论浏览器大小如何，它都会以100％减去这些26像素（从底部）滚动。这有助于澄清问题吗？如果需要，我会尽力解释得更好。 - Ed R

我仍然不明白你在说什么 - 但这看起来像是你只需要使用一个固定元素。http://jsfiddle.net/HxxfP/ - mrtsherman