1

嘿伙计们，我在 Susy 的固定定位方面遇到了一些问题，我希望有人能在这里帮助我解决我的问题。

当我将位置从静态（使用跨度列时的默认选项）切换到固定时，具有固定位置的块超出了我给它的宽度。无论如何要确保固定定位的列与静态列保持相同的大小？（问题出在右边，左边出血是故意的）

这是图片的链接，以更好地显示我的要求。
http://www.zell-weekeat.com/wp-content/uploads/2013/08/question.jpg

这是我目前在布局文件中的内容：sidebar-primary 是红色框，而 sidebar-secondary 是橙色框。

.sidebar-primary {
    @include span-columns ( 4, 16 );
    text-align: right;
    background:red;
}

.sidebar-secondary {
    @include at-breakpoint($large) {
        @include span-columns ( 4, 16 );

        @include bleed ( 1 of 16, left );
        text-align: right;
        background: orange;
        position: fixed;
        // height: 100%;
    }
}

谢谢！

4

1 回答 1

3

相对宽度是根据它们的定位上下文计算的。Static和relative定位元素总是在其父元素的上下文中。相反，absolute宽度是相对于下一个非静态祖先计算的，fixed宽度是相对于浏览器窗口（或“视口”）的。

Susy 通过计算相对于容器的宽度来工作，这不适用于已从预期流中删除的固定元素。如果您可以处理额外的标记，则有一个聪明的解决方法。您需要做的是创建一个固定上下文，然后container为 Susy创建一个，然后span-columns在该固定容器内执行您的操作：

// fixed context
.fixed-context {
  position: fixed;
  left: 0;
  right: 0;

  // container
  .container {
    @include container;

    // span-columns
    .sidebar {
      @include span-columns(4);
    }
  }
}

如果您有一个固定位置的容器可以在其中工作，则其中的列跨度将恢复原位。

于 2013-08-28T05:06:47.733 回答