使用全宽，不包括带"position: absolute"的溢出滚动条

Question

我想在固定的顶部位置有一个全宽的小红色div，在另一个有overflow: scroll的div内。我希望jsFiddle说清楚：http://jsfiddle.net/mCYLm/2/。

问题是红色div 与滚动条重叠。我想right: 0的意思是div.wrapper的右侧;它不会减去div.main的滚动条。当我将overflow: scroll移动到div.wrapper时，红色横幅的大小合适（小提琴）。但是，它不再处于固定位置（向下滚动会使横幅向上滚动）。

如何同时实现以下两件事？

• 红色横幅像这把小提琴一样固定在固定位置。
• 红色横幅具有全宽，除了滚动条，就像这个小提琴一样。

我想让它在谷歌浏览器中工作。

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

Answer 1

似乎这在纯CSS中是不可能的，所以这里有一个JavaScript（jQuery）黑客：

$(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
});

Answer 2

HTML

<div class="scroller">
    <div class="banner-wrapper">
        <div class="banner"></div>
    </div>
</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>​

.CSS

* { margin: 0; padding: 0 }
body {
    padding-top: 30px;
}
div.main {
    height: 200px;
    width: 100%;
    overflow-y: scroll;
    position: absolute;
    z-index: 50;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));
}
div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}
div.scroller {
    height: 20px;
    width: 100%;
    position: absolute;
    z-index: 100;
    overflow: hidden;
}
div.banner-wrapper {
    background: transparent;
    position: relative;
    height: 20px;
    overflow-y: scroll;
    left: 0;
    margin-right: -20px;
}
div.banner {
    height: 20px;
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));;
    margin-left: 20px;
    margin-right: 40px;
}

开发版本： http://jsfiddle.net/mCYLm/13/
最终版本：http://jsfiddle.net/mCYLm/14/

适用于缩放和可变视口宽度.
！错误：右上角的滚动条按钮无法访问/单击。

测试于：

• IE6，7，8，9（窗口）
• FF11 （视窗）
• 谷歌浏览器 18 （ubuntu）
• Safari 5.1 （OSX）