css - Susy 2:固定宽度的侧栏，带有主要内容区域

使用susy 2（release candidate），我试图找出如何创建一个具有固定宽度侧边栏（左位置或右位置）的简单流体布局，我很乐意使用第一个和最后一个关键字。有人能给我一些关于如何在Susy 2中做到这一点的建议吗？
谢谢您！

最佳答案

有几种方法可以混合固定/流体布局，具体取决于您自己的具体情况。
隔离侧边栏。
浮动隔离是保持浮动彼此独立的一种很酷的方法。

.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)将使用column-width设置/单位跨越3列。添加isolate将设置负的右边距，以避免占用水平空间。添加wide，将在该宽度中包含额外的边沟。您也可以使用任意宽度，例如200px。这取决于你。
完全从流中移除侧边栏。
如果从流中删除侧边栏是安全的，那么有时绝对定位它并向主内容添加相等的填充是最简单的。使用Susy 2，可能看起来像这样：

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

.main {
  padding-left: span(3 static wide);
}

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

.side {
  @include span(3 static);
}

.main {
  overflow: hidden;
}

这样做的缺点是，如果你因为任何原因需要溢出。还有其他一些技术，也有其他黑客的缺点，比如这个：

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