我可以对内容使用最大宽度，而对背景使用全宽吗？

Question

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

当max-width被填写时，页眉和页脚区域得到max-width和margin: 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;
}

我明白了：

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

是否可以为页面的页眉、内容和页脚部分设置相同的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%);（与全角 Gutenberg 块相同）和 padding-left/padding-right @ 987654324@：这样块将跨越整个视口宽度，但内容区域将具有内容区域的宽度（全宽减去填充）。您还必须将要在内容列中使用的常规填充添加到这些值。

Answer 2

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

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

但前提是 max-width 为文章内的这 3 个 div 设置

content-block 是否由article 表示？

更新

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

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

如果可能的话，您可以使用position: absolute 放置图像，然后将带有position: absolute 的文本放在其顶部，但我猜您的内容块不会那样工作；/