Question

嘿伙计们我在Susy的固定位置遇到了一些问题，我希望有人会帮我解决我的问题。

当我从静态切换位置（使用span列时的默认选项）到固定时，具有固定位置的块突出我给出的宽度。无论如何要确保固定定位柱的尺寸与静态柱的尺寸相同吗？（问题出在右侧，左侧出血是故意的）

这是一张图片链接，可以更好地展示我的要求。
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%;
    }
}

谢谢！

Answer 1

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

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

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

  // container
  .container {
    @include container;

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

如果你有一个固定位置的容器在里面工作，它内部的柱间将会重新落回到位。

固定位置比Susy的相对位置占用更多空间？

1 个答案: