Html 固定宽度容器内具有100%视口宽度的背景

我有一个1000像素宽的容器。其中一个设计项的背景为全宽（请参见图中的蓝色条）。是否可以在没有附加标记的情况下放置这样的背景

下面是它的样子：

以及我想使用的标记：

<div class="container">
    <p>Lorem...</p>
    <p class="bar">Lorem</p>
    <p>Lorem...</p>
    <p>Lorem...</p>
    <p>Lorem...</p>
</div>

它几乎已经足够好了，除了把它放在容器的顶部，而不是放在蓝色条的顶部有一个问题。另外，使用额外的元素感觉是多余的

它也可以通过将蓝色条作为父项和子项放置在容器外部来完成，但这样我会将1000px值放置三次：对于蓝色条上方的div，对于蓝色条内部的div，以及蓝色条下方的div

---

是否有某种方法可以实现这种效果，以避免重复容器的宽度，而不需要任何额外的标记？

方法是简单地将宽度放在

p

元素而不是容器上，然后为

p.bar

创建一个更具体的样式

.container p {
  background-color: yellow;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.container p.bar {
  background-color: blue;
  width: 100vw;
}

HTML:

洛勒姆

洛雷姆

洛勒姆

洛勒姆

洛勒姆

---

Plunker:

方法是简单地将宽度放在

p

元素上，而不是容器上，然后为

p.bar

创建更具体的样式

.container p {
  background-color: yellow;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.container p.bar {
  background-color: blue;
  width: 100vw;
}

HTML:

洛勒姆

洛雷姆

洛勒姆

洛勒姆

洛勒姆

---

普朗克：

我认为更好的解决办法是这样做。您仍然可以保留原始代码，但不必处理文本体中的绝对位置元素。更干净，你可以编辑的酒吧宽度为任何你想要的，我只做了150%，使用100vw如果你想最大宽度的屏幕

.container {
  width: 1000px;
  background-color: grey;
  margin: 0 auto;
  .bar {
    padding: 0 25%;
    width: 150%;
    box-sizing: border-box;
    background-color: blue;
    left: -25%;
    position: relative;
  }
}

---

我认为更好的解决办法是这样做。您仍然可以保留原始代码，但不必处理文本体中的绝对位置元素。更干净，你可以编辑的酒吧宽度为任何你想要的，我只做了150%，使用100vw如果你想最大宽度的屏幕

.container {
  width: 1000px;
  background-color: grey;
  margin: 0 auto;
  .bar {
    padding: 0 25%;
    width: 150%;
    box-sizing: border-box;
    background-color: blue;
    left: -25%;
    position: relative;
  }
}

下面是CSS

calc（）

方法。由于容器的宽度是固定的，因此您可以使用负边距使

.bar

具有完整的视口宽度，并使用相同数量的正填充来校正文本框的垂直对齐（可选）

我将其放入媒体查询，确保在更大的窗口中检出

正文{
保证金：0；
}
@介质（最小宽度：1000px）{
.集装箱{
宽度：1000px；
保证金：0自动；
背景：粉红色；
}
.酒吧{
保证金：0 calc（50%-50vw）；
填充：0 calc（50vw-50%）；
框大小：边框框；
背景：金；
}
}

洛勒姆。。。
洛勒姆
洛勒姆。。。
洛勒姆。。。
洛勒姆。。。

以下是CSS

calc（）

方法。由于容器的宽度是固定的，因此您可以使用负边距使

.bar

具有完整的视口宽度，并使用相同数量的正填充来校正文本框的垂直对齐（可选）

我将其放入媒体查询，确保在更大的窗口中检出

正文{
保证金：0；
}
@介质（最小宽度：1000px）{
.集装箱{
宽度：1000px；
保证金：0自动；
背景：粉红色；
}
.酒吧{
保证金：0 calc（50%-50vw）；
填充：0 calc（50vw-50%）；
框大小：边框框；
背景：金；
}
}

洛勒姆。。。
洛勒姆
洛勒姆。。。
洛勒姆。。。
洛勒姆。。。

您可以这样做：在该元素上使用相对位置，100vw

宽度和
左侧：计算（（100vw-500px）/2*-1）
将其向左移动到与左窗口边框完全相同的距离：（其中像素值是容器的宽度-这里我用500px将其放入片段中）


*{
框大小：边框框；
}
html，
身体{
保证金：0；
背景：#fafafa；
}
.集装箱{
宽度：500px；
保证金：0自动；
}
.酒吧{
位置：相对位置；
左：计算（（100vw-500px）/2*-1）；
宽度：100vw；
背景色：#fa0；
填充物：5px；
}

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨

Donec quam felis、ultricies nec、Pelletsque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托
猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯
 
您可以这样做：在该元素上使用相对位置，100vw
宽度和
左侧：计算（（100vw-500px）/2*-1）
将其向左移动到与左窗口边框完全相同的距离：（其中像素值是容器的宽度-这里我用500px将其放入片段中）


*{
框大小：边框框；
}
html，
身体{
保证金：0；
背景：#fafafa；
}
.集装箱{
宽度：500px；
保证金：0自动；
}
.酒吧{
位置：相对位置；
左：计算（（100vw-500px）/2*-1）；
宽度：100vw；
背景色：#fa0；
填充物：5px；
}

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨

Donec quam felis、ultricies nec、Pelletsque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托
猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁