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

【问题标题】：Susy 2: Fixed width sidebar with fluid main content areaSusy 2：具有流动主要内容区域的固定宽度侧边栏
【发布时间】：2014-02-23 11:41:05
【问题描述】：

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

谢谢！

【问题讨论】：

标签： css grid sass susy-compass fixed-width

【解决方案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 等任意宽度。这取决于你。
从流程中完全移除侧边栏。

如果从流程中删除侧边栏是安全的，有时最简单的方法是绝对定位它，并为主要内容添加相等的填充。使用 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;
}
```

【讨论】：

非常感谢您的全面回复！我将尝试所有这些选项，看看什么最适合我。
不使用 Susy 几乎不需要更多代码，也不必依赖负边距等。

【解决方案2】：

对于带有固定侧边栏的整体布局，您不需要 Susy。您可以在主要内容区域（这将是您的“容器”）内使用 Susy 进行流畅布局，但对于整体布局，您可以简单地使用纯 SCSS（甚至是 CSS，但您必须重复宽度而不是保留变量):

$side-bar-width: 250px; // whatever width you want

.side {
    float: left;
    width: $side-bar-width;
}

.main {
    width: calc(100% - #{$side-bar-width});
}

简单得多。

此解决方案完全以CSS calc() 函数为中心。

【讨论】：