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。

元素在左侧和右侧出血？

1 个答案: