元素在左侧和右侧流血？

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

问题是header和footer的右侧边距很小，里面没有使用任何gutter间距。我怎样才能让它们成为容器的整个宽度，并将装订线作为填充？

Answer 1

由于您使用的是拆分间距和全宽容器，因此您无需 bleed 完成任何操作。默认情况下，您的页眉和页脚都将流到边缘，无需 Susy 的任何帮助。您需要做的就是添加间距 inside 以将内容重新显示在网格上。

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

不需要其他 Susy 代码。删除 span 和 bleed.

元素在左侧和右侧流血？

Element bleed on left and right sides?

sass

susy-sass