Susy 2：具有流动主要内容区域的固定宽度侧边栏

使用 Susy 2（候选版本），我试图弄清楚如何创建一个带有固定宽度侧边栏的简单流体布局 - 无论是左侧位置还是右侧位置 - 我很高兴使用第一个和最后一个关键字。谁能告诉我如何在 Susy 2 中执行此操作？

谢谢你！

有几种方法可以混合固定/流体布局，具体取决于您自己的具体情况。

1. 隔离侧边栏。

   浮动隔离是保持浮动彼此独立的一种很酷的方法。

   .side {
     @include span(3 static isolate);
   }
   
   .main {
     @include full;
     padding-left: span(3 static wide);
   }
   
   // or...
   
   .main {
     margin-left: span(3 static wide);
   }
   

   span(3 static)将跨越 3 列，使用您的column-width设置/单位。添加isolate将设置负右边距，以防止其占用水平空间。添加wide，将包括该宽度的额外装订线。您还可以使用任意宽度，例如200px反而。由你决定。

2. 从流程中完全删除侧边栏。

   如果可以安全地从流程中删除侧边栏，则有时最简单的方法是绝对定位它，并向主要内容添加相等的填充。使用 Susy 2，可能看起来像这样：

   .side {
     position: absolute;
     left: 0;
     top: 0;
     width: span(3 static);
   }
   
   .main {
     padding-left: span(3 static wide);
   }
   

3. 使用布局上下文技巧。

   还有一些方法可以创建新的布局上下文，该上下文将填充浮动后的剩余空间。其中最简单的是overflow: hidden;

   .side {
     @include span(3 static);
   }
   
   .main {
     overflow: hidden;
   }
   

   这样做的缺点是如果您因任何原因需要溢出。还有其他技术也有其他缺点，例如：

   .main {
     display: table-cell;
     vertical-align: top;
     width: 10000px;
   }