将 singularitygs 用于固定宽度的内容、全宽彩色背景和重叠两个全宽部分的图像
Using singularitygs for fixed width content, full width color background, and image overlapping two full width sections
我正在尝试生成这样的布局：
蓝色是顶部 header，红色是底部 header，绿色是菜单，白色底部是 body。白色圆圈是我试图放置的徽标，它与 header 部分重叠，但不与菜单部分重叠。
按照 Singularity Grid layout with header and footer width 100% 中的建议，我在内容部分设置了 div 包装器，并使全宽背景颜色正常工作。
我还使用 div 包装器将 header 和菜单区域定位到屏幕中间的固定宽度位置（由黑色垂直线表示）。
最后，我将 header 区域设置为仅占据网格的一部分 (9,4)，并将徽标设置为仅占据网格的一部分 (3,1) ).
不幸的是，我不太确定如何将徽标与网格部分对齐并保持全宽彩色背景。如果我设置 div 的方式与我尝试做的不一致，我也不会感到惊讶。
有什么建议或提示吗？
我已经设置了一个 Sassmeister 示例。实际站点是在 drupal 中完成的，但演示是从头开始完成的，希望能使其更具可读性。
http://sassmeister.com/gist/7163c32a080a446f20ff
您可能只需要打开带有徽标的行上可见的溢出，并将徽标与顶部放在同一行 header 这样它就可以悬垂到底部.这有点粗糙，但它表明了我的意思：
我正在尝试生成这样的布局：
蓝色是顶部 header，红色是底部 header，绿色是菜单，白色底部是 body。白色圆圈是我试图放置的徽标，它与 header 部分重叠，但不与菜单部分重叠。
按照 Singularity Grid layout with header and footer width 100% 中的建议，我在内容部分设置了 div 包装器，并使全宽背景颜色正常工作。
我还使用 div 包装器将 header 和菜单区域定位到屏幕中间的固定宽度位置（由黑色垂直线表示）。
最后，我将 header 区域设置为仅占据网格的一部分 (9,4)，并将徽标设置为仅占据网格的一部分 (3,1) ).
不幸的是，我不太确定如何将徽标与网格部分对齐并保持全宽彩色背景。如果我设置 div 的方式与我尝试做的不一致，我也不会感到惊讶。
有什么建议或提示吗？
我已经设置了一个 Sassmeister 示例。实际站点是在 drupal 中完成的，但演示是从头开始完成的，希望能使其更具可读性。 http://sassmeister.com/gist/7163c32a080a446f20ff
您可能只需要打开带有徽标的行上可见的溢出，并将徽标与顶部放在同一行 header 这样它就可以悬垂到底部.这有点粗糙，但它表明了我的意思：