将singularitygs用于固定宽度内容，全宽彩色背景和图像重叠两个全宽度部分

Question

我试图制作这样的布局：

蓝色是顶部标题，红色是底部标题，绿色是菜单，白色底部是标题。白色圆圈是我试图放置的徽标，使其与标题部分重叠，但不与菜单部分重叠。

按照Singularity Grid layout with header and footer width 100%中的建议，我在内容部分设置div包装器，并使全宽背景颜色有效。

我还使用div包装器将标题和菜单区域定位到屏幕中间的固定宽度位置（由黑色垂直线表示）。

最后，我设置了标题区域以仅占用网格的一部分（9,4），并且标识仅占据网格的一部分（3,1）。

不幸的是，我并不确定如何将网格部分旁边的徽标对齐并保持全宽颜色背景。如果我设置div的方式与我尝试做的事情不一致，我也不会感到惊讶。

有任何建议或提示吗？

我已经设置了一个Sassmeister示例。实际的网站是在drupal中完成的，但是演示是从头开始完成的，希望能让它更具可读性。 http://sassmeister.com/gist/7163c32a080a446f20ff

Answer 1

您可能只需打开带有徽标的行上可见的溢出，并将徽标与顶部标题位于同一行，以便它可以悬垂到底部。这有点粗糙，但它显示了我的意思：

http://sassmeister.com/gist/3390b25fdd41d1e6fba2