Question

使用Susy 2（候选版本），我试图弄清楚如何使用固定宽度的侧边栏创建一个简单的流体布局 - 左侧或右侧 - 我很高兴使用第一个和最后一个关键字。谁能给我任何关于如何在Susy 2中做到这一点的指示？

谢谢！

Answer 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)将使用您的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;
}
```
缺点是如果你因任何原因需要溢出。还有其他技术，有其他hackey缺点，如下这个：
```
.main {
  display: table-cell;
  vertical-align: top;
  width: 10000px;
}
```

Answer 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()函数为中心。

Susy 2：固定宽度的侧边栏，带有流体主要内容区域

2 个答案: