Css 多列具有固定位置的容纳盒

我使用列宽水平包装列表。该列表位于固定位置包装内

包装有背景，但当位置固定（或任何父位置固定）时，背景不会应用于列表的整个宽度。当位置为静态时，背景显示良好

在使用多列布局时，如何使包装器包含其内容，以便将背景应用于整个宽度

我在这个JSFIDLE中有一个固定和非固定定位的多列布局示例，背景为-

马
母牛
鸡
猪
鸭子
欧洲货币联盟
鹅
驴子
鸡


马
母牛
鸡
猪
鸭子
欧洲货币联盟
鹅
驴子
鸡

.固定包装{
背景：蓝色；
-moz列宽：100px；
-webkit列宽：100px；
高度：40px；
位置：固定；
}
.垫片{
高度：100px；
}
.包装纸{
背景：红色；
-moz列宽：100px；
高度：40px；
}

我怀疑它不能按我希望的方式工作的原因是-

:

列框充当其内容的包含块。也就是说，根据CSS 2.1第10.1节第2项[CSS21]，列框的行为类似于块级、表格单元和内联块框。但是，列框不会为具有“位置：固定”或“位置：绝对”的元素建立包含块

---

使用

位置时：固定width:100%

这将为包装器提供包含元素的完整宽度，而不管列表的列有多宽。

<div class='fixedWrapper'>
    <ul>
        <li>Horse</li>
        <li>Cow</li>
        <li>Chicken</li>
        <li>Pig</li>
        <li>Duck</li>
        <li>Emu</li>
        <li>Goose</li>
        <li>Donkey</li>
        <li>Chicken</li>
   </ul>
</div>
<div class='spacer'>
</div>
<div class='wrapper'>
    <ul>
        <li>Horse</li>
        <li>Cow</li>
        <li>Chicken</li>
        <li>Pig</li>
        <li>Duck</li>
        <li>Emu</li>
        <li>Goose</li>
        <li>Donkey</li>
        <li>Chicken</li>
   </ul>
</div>



.fixedWrapper {
  background: blue;
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  height: 40px;
  position: fixed;
}

.spacer {
  height: 100px;
}

.wrapper {
  background: red;
  -moz-column-width: 100px;
  height: 40px;
}