我可以使用最大宽度作为内容，但全宽度作为背景？

Question

我正在开发一个带有主题选项页面的Wordpress主题。在这些选项，一个网站的最大宽度可以设置，但我有一些困难的内容领域。

填充max-width时，页眉和页脚区域将得到max-width和margin: O auto;。

内容页将使用Gutenberg创建，我希望能够向我使用的块添加背景属性并显示它们的全宽度，但内容将落入以前定义的最大宽度。

HTML：

<header class="site-header">
   <div class="header-wrapper"></div>
</header>
<main class="site-content">
   <article class="post-10">
      <header></header>
      <div></div>
      <footer></footer
   </article>
</main>
<footer class="site-footer">
   <div class="header-wrapper"></div>
</footer

CSS：

.header-wrapper,
.footer-wrapper,
article {
     max-width: 1366px;
     margin: 0 auto;
}

我明白了：

​

我希望我的背景是全宽度，但我的内容与我的页眉和页脚的内容相同。

是否有可能为页面的页眉、内容和页脚部分设置相同的max-width，并确保内容区域中的背景仍然是全宽度的？

Answer 1

您可以通过将add_theme_support( 'align-wide' );添加到functions.php文件中来激活“宽对齐”和“完全对齐”。然后，用户可以选择对齐整个视口宽度的图像。

另见https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features

但这是为了图像而不是背景。

对于背景区域/图像，您可以尝试创建规则块(内容区域的100%)，这些块具有margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (与全宽度古滕贝格块相同)和填充-左/填充-右calc(50vw - 50%);这样的边距设置:这样，块将跨越整个视口宽度，但内容区域将具有内容区域的宽度(全宽度减去填充)。您还必须将要在内容列中使用的常规填充添加到这些值中。

Answer 2

如果我理解，那么您的css应该如下所示：

.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
     max-width: 1366px;
     margin: 0 auto;
}
article{
     width: 100%;
     background: blue;
}

但是，只有在为这篇文章中的3个div设置了max-width的情况下

content-block是用article表示的吗？

更新

我从https://css-tricks.com/full-width-containers-limited-width-parents/重新创建了代码

https://codepen.io/anon/pen/eaJyqV

如果可能的话，您可以将图像放在position: absolute中，然后在上面放置带有position: absolute的文本，但我想您的内容块不是这样工作的;/