我可以对内容使用max-width，但对背景使用全角吗？

我正在开发带有主题选项页面的Wordpress主题。在这些选项中, 可以设置网站的最大宽度, 但是在内容区域方面有些困难。

填写最大宽度后, 页眉和页脚区域将获得最大宽度和边距：O auto;。

内容页面将使用Gutenberg Builder创建, 并且我希望能够将背景属性添加到我使用的块中, 并以全角显示它们, 但是内容将变为之前定义的最大宽度。

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;
}

我得到这个：

我希望背景是全角的, 但内容要与页眉和页脚的内容相同。

是否可以为页面的页眉, 内容和页脚部分设置相同的最大宽度, 并确保内容区域中的背景仍为全角？

#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％);右边距：calc(-50vw + 50％); (与全角Gutenberg块中的相同)和padding-left / padding-right calc(50vw-50％);：这样, 该块将跨越整个视口宽度, 但是内容区域将具有内容区域的宽度(全宽减去填充)。你还必须将要在”内容”列中使用的常规填充添加到这些值。

#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

如果可能的话, 你可以将图像放在位置：absolute, 然后将文本放在位置：absolute, 但是我想你的内容块不能这样工作； /