Question

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

包装器有背景，但当位置固定（或任何父位置固定）时，背景不会应用于列表的整个宽度。当位置是静态时，背景看起来很好。

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

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

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

我怀疑它之所以无法工作的原因是因为 -

https://www.w3.org/TR/2011/CR-css3-multicol-20110412/：

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

Answer 1

当您在css中使用currentReminders: NSMutableArray时，对于某个类，如果您需要将背景设置为100％，那么您应该将 position: fixed; 添加到同一个类中。 https://jsfiddle.net/zeasts/vwLwL9cn/1/

包含位置包含框的多列是固定的

1 个答案: