元素在左右两侧流血？

Question

我有一个来自 Susy2 和 Sass 的 5 列网格，其中页眉和页脚应为主体宽度的 100%（以获得完全出血效果），但它们的内容仍应使用网格的排水沟。

这是一些示例标记：

<header>Lorem ipsum dolor sit amet</header>

<div id="main">
  <p>Quia blanditiis ...</p>
  <p>Nostrum iure reprehenderit...</p>
</div>

<div id="sidebar">
  <p>Eveniet, aut, dolorum, adipisci dolor ...</p>
</div>

<footer>Hi mom</footer>

这是我写的 Sass 和 Susy：

@import "susy";

$susy: (
  columns: 5,
  gutters: 1/10,
  output: float,
  gutter-position: split,
  container: auto
);

body { @include container; }

header, footer {
  @include span(5);
  @include bleed();
  color: white;
  background-color: grey;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#main {
  @include span(3);
  outline: solid red 1px;
}

#sidebar {
  @include span(2);
  outline: solid yellow 1px;
}

这是一个 Codepen 演示：http://codepen.io/KatieK2/pen/xbdVbJ?editors=110

问题在于页眉和页脚的右侧边距很小，并且它们在内部没有使用任何装订线间距。我怎样才能让它们成为容器的整个宽度，并将排水沟作为填充物包含在内？

Answer 1

由于您使用的是拆分装订线和全宽容器，因此您无需 bleed 结束。默认情况下，您的页眉和页脚都将流向边缘，无需 Susy 的任何帮助。您需要做的就是添加排水沟inside 以将内容重新显示在网格上。

header, footer {
  @include gutters(inside);
}

无需其他 Susy 代码。删除span 和bleed。