具有位置的包含框的多列是固定的答案

【问题标题】：Multicolumns to have containing box with position is fixed具有位置的包含框的多列是固定的
【发布时间】：2016-04-21 03:32:01
【问题描述】：

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

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

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

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

https://jsfiddle.net/vwLwL9cn/

<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]，列框的行为类似于块级、表格单元格和内联块框。但是，列框不会为具有“位置：固定”或“位置：绝对”的元素建立包含块。

【问题讨论】：

标签： css

【解决方案1】：

当你在css中使用 position: fixed; 作为一个类，如果你需要背景100%满，那么你应该在同一个类中添加 width: 100% 。 https://jsfiddle.net/zeasts/vwLwL9cn/1/

【讨论】：

这为包装器提供了包含元素的完整宽度，无论列表的列有多宽。