是否可以在保持父级固定的同时使子级 div 静态？

Question

我有一个在页面右侧对齐的列。该列必须跨越页面的整个高度，因此我将其固定的原因。列中将有不应修复的项目。无论我玩什么项目，都继续滚动页面。

有没有人有办法让子 div 在固定的父级中保持静态，或者在不使用固定定位的情况下使列跨越页面的整个高度？

这里是 CSS：

.rightCol{
   width: 28px; 
   position: fixed; 
   bottom: 0px; 
   top: 0px; 
   z-index: -1; 
   margin-left: 969px;
}
.rightColItem{
   margin-top: 95px;
   margin-left: 10px;
   position: absolute;
}​

还有 HTML：

<div class="rightCol">
   <div class="rightColItem">
      I want this to be static and not fixed
   </div>
</div>

这是一个小提琴的链接 --> http://jsfiddle.net/7hmKy/

非常感谢任何帮助！

编辑 1：右对齐栏位于 1000 像素的容器 div 内。

Answer 1

一种更简单的方法（也可以使用更少的标记）是使用 CSS3 渐变作为页面背景。您还可以轻松地使用图像回退来支持旧浏览器：

body {
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
  background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
  background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
  background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
  background: linear-gradient(right, #fa8072 200px, transparent 200px);
}

.sidebar {
  width: 200px;
  float: right;
}

Demo（我使用了 Sass 和 Compass，因为它们使 CSS3 渐变更容易保持更新。）

编辑：

根据您的评论，我创建了一个新示例，该示例使用 1000 像素宽的居中 body（您可以使用 div 进行一些调整）并更改渐变以复制边框：

body {
  height: 100%;
  min-height: 2000px;
  width: 1000px;
  margin: 0 auto;
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
  background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
  background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
  background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
  background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}

Demo