我想在一个固定的顶部位置有一个小红色div,全宽,在另一个有溢出的div里面：滚动.我希望jsFiddle明确表示：
http://jsfiddle.net/mCYLm/2/.
问题是红色div与滚动条重叠.我猜是正确的：0表示div.wrapper的右侧;它不会减去div.main的滚动条.当我移动溢出时：滚动到div.wrapper,然后红色横幅具有正确的大小(fiddle).但是,它不再处于固定位置(向下滚动使横幅向上滚动).
我怎样才能一起完成以下两件事？
>红色横幅位于固定位置,如this fiddle所示.
>红色横幅的宽度除了滚动条,如this fiddle所示.
我想在Google Chrome中使用它.
HTML：
<div class="wrapper">
<div class="red-banner"></div>
<div class="main">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>
</div>
CSS：
div.wrapper {
position: relative;
}
div.main {
height: 200px;
overflow-y: scroll;
}
div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
div.red-banner {
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
}
解决方法
看起来像纯CSS一样不可能,所以这里是一个JavaScript(jQuery)hack：
$(function() {
var $container = $("<div>").css({ height: 1,overflow: "scroll" }).appendTo("body");
var $child = $("<div>").css({ height: 2 }).appendTo($container);
window.SCROLLBAR_WIDTH = $container.width() - $child.width();
$container.remove();
});
然后：
$("div.red-banner").css({
right: SCROLLBAR_WIDTH
});
