固定位置比Susy的相對位置佔用更多空間？

Question

嘿傢伙我在固定定位Susy時遇到了一些問題，我希望有人能幫助我解決我的問題。

當我將位置從靜態（使用跨度列時的默認選項）切換到固定位置時，具有固定位置的塊超出了我給出的寬度。無論如何要確保固定位置的柱子與靜態柱子的尺寸保持一致嗎？ （問題在右邊，左邊的出血是故意的）

這是一張圖片的鏈接，以便更好地展示我所問的內容。
http://www.zell-weekeat.com/wp-content/uploads/2013/08/question.jpg

這是我目前在我的佈局文件： 側邊欄主要是紅色的盒子，而側邊欄中學是橙色框。

.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寬度是相對於下一個非靜態祖先計算的，並且寬度是相對於瀏覽器窗口（或「視口」）的。

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

如果你有一個固定位置的容器，列跨度內工作在裏面它會回落到位。