设置底部CSS属性时，CSS overflow滚动条定位错误

Question

我有一个div，它的页脚图像占据了26px的空间。CSS设置为在需要时显示垂直滚动条，但是我需要确保滚动条不会重叠到我的页脚区域，所以我使用bottom:26px;将其调出。当发生这种情况时，滚动条向上移动，我看不到内容的顶部，也看不到滚动条的上箭头。我不确定如何修改css来修复它，所以滚动条在最上面，并在底部为我的图像留下了26px的间距。任何帮助都是非常感谢的。

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%;
}

Answer 1

考虑一下重新构建您的html。如果div应该滚动，但页脚不滚动，那么我不会将它们组合在一起。将页脚上的页边距/填充设置为0，并将滚动条底部的页边距/填充设置为0。它们应该无缝地融合在一起。还避免了使用位置绝对值和底值的需要。

这是我想你要做的小提琴。http://jsfiddle.net/vdZ6R/

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