我正在研究WordPress主题，并希望使用户能够在其中使用全角块。为此，我使用以下HTML / CSS结构（简化为基本问题）。
（注意：尽管这是针对WordPress主题的，但问题本身与WordPress不相关，而是“仅” CSS问题，因为我什至可以在SO代码段中使用此非常基本的结构来重现它）
* {
box-sizing: border-box;
}
html,body {
margin: 0;
height: 100%;
}
.content {
width: 100%;
max-width: 400px;
margin: 0 auto;
overflow-y: visible;
background: #eee;
}
.alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #ccc;
}<div class="content">
<p>Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,porttitor eu,consequat vitae,eleifend ac,enim. Aliquam lorem ante,dapibus in,viverra quis,feugiat a,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
<p class="alignfull">
Some more text - should be full width. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,enim. Aliquam
lorem ante,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. </p>
<p>Some regular text again. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,enim. Aliquam lorem
ante,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
</div>
因此，存在一个.content容器，该容器具有一个max-width像素值，通过使用margin: 0 auto;在水平方向居中。在那里，常规块（即此处的第一个和最后一个p）将具有默认值width: auto，因此它们的宽度将与其父级.content一样。
要创建全角容器，请应用.alignfull类（在我的示例中为第二个p）。为此定义的左边距和右边距为calc(50% - 50vw);，（当视口比.content的最小宽度宽时）应创建一个 negative 边距值，该值为内容容器与视口边缘之间的精确距离。这样，该元素应具有视口的确切宽度。
但这不起作用：.alignfull元素最终比视口宽了几个像素。
我意识到：
这与垂直滚动条有关：如果整个内容的高度小于视口（即，如果没有垂直滚动条可见），则不会出现此问题。因此，当存在滚动条时，全角元素的100％宽度小于100vw。
在“官方” Twentynineteen 主题中，这是通过完全不同的方式解决的，该方式避免使用vw单位，并使用百分比值表示内容的最大宽度区域。但是我看过一些教程，描述了我尝试使用的方法...
是否有像我一样使用内容容器的width / max-width的px值使其正常工作的方法？
第一次回答后加法
我应该补充一点，我已经使用了另一种方法，对此我也不满意。这为内容容器的 all 个直接子代定义了max-width，对于.alignfull则将其更改为100％。
但是，这带来了一些其他问题：浮动元素不停留在内容区域内，而是向左或向右浮动，并且默认情况下具有左右边距（例如blockquote）的元素是松散的它们的页边距设置，该设置会被更具体的.content>*选择器的margin: 0 auto覆盖，这对于居中是必需的。 （请参见下面的示例）。
我知道WordPress块编辑器将浮动图像放入非浮动块（然后将获得最大宽度并居中），但是我希望能够对帖子格式使用相同的CSS为此，禁用了块编辑器（使用“禁用Gutenberg”），因此图像不是必然包装在非浮动块中，即，浮动图像（不在任何容器元素中）会以结尾。
* {
box-sizing: border-box;
}
html,body {
margin: 0;
height: 100%;
}
.content>* {
max-width: 400px;
margin: 0 auto;
background: #eee;
}
blockquote {
margin: 30px 40px;
background: #fc7;
color: red;
}
.floated_img {
float: right;
width: 20%;
height: auto;
}
.alignfull {
max-width: none;
background: #ccc;
}<div class="content">
<p>Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
<img class="floated_img" src="http://lorempixel.com/output/food-h-c-117-198-7.jpg">
<p>Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
<p>Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. </p>
<blockquote>This should be a blockquote</blockquote>
<p>Some regular text again. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </p>
</div>