Question

我有一个宽度为1000px的容器。设计项目的背景为全宽（参见图像上的蓝色条）。是否可以在没有额外标记的情况下放置这样的背景？

以下是它的样子：

我想使用的标记：

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

我尝试使用绝对定位的附加元素和一些额外的技巧来做到这一点：

.bar:after {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background-color: blue;
    transform: translateX(-50%);
    z-index: -1;
}

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

也可以通过将蓝色条放在容器外面，作为父级和子级，但这样我最终会将1000px值放三次：对于div上面的div，对于div里面蓝色和蓝色下的div。

有没有办法实现这种效果，以避免重复容器的宽度而没有任何额外的标记？

Answer 1

我认为更好的解决方案是做这样的事情。您仍然可以保留原始代码，但不必处理文本正文中的绝对位置元素。更干净，您可以编辑条的宽度为任何你想要的，我只是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;
  }
}

Answer 2

这是CSS calc()方法。由于容器是固定宽度的，因此您可以使用负边距来使.bar全视口宽度，并使用相同数量的正填充来校正文本框的垂直对齐（可选）。

我把它放入媒体查询中，请务必在更大的窗口中查看。

<强> Codepen

body {
  margin: 0;
}

@media (min-width: 1000px) {
  .container {
    width: 1000px;
    margin: 0 auto;
    background: pink;
  }
  .bar {
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    box-sizing: border-box;
    background: gold;
  }
}

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

上一个回答

body {
  margin: 0;
}

@media (min-width: 1000px) {
  .container {
    width: 1000px;
    margin: 0 auto;
    background: pink;
  }
  .bar {
    margin: 0 calc((1000px - 100vw) / 2);
    padding: 0 calc((100vw - 1000px) / 2);
    box-sizing: border-box;
    background: gold;
  }
}

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

Answer 3

你可以这样做：使用该元素的相对位置，100vw width和left: calc((100vw - 500px) / 2 * -1);将左边的位置移动到左边窗口边界的距离:(在那个像素处） value是容器的宽度 - 这里我使用500px将其放入代码片段中

* {
box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: #fafafa;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.bar {
  position: relative;
  left: calc((100vw - 500px) / 2 * -1);
  width: 100vw;
  background-color: #fa0;
  padding: 5px;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>

  <p class="bar">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

  <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </p>

另一种解决方案是使用相同calc值的负边距。这样你就可以省略position: relative：

* {
box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: #fafafa;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.bar {
  margin-left: calc((100vw - 500px) / -2);
  margin-right: calc((100vw - 500px) / -2);
  background-color: #fa0;
  padding: 5px;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>

  <p class="bar">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

  <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </p>

Answer 4

接近方法是简单地将宽度放在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：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

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

</html>

Plunker：https://plnkr.co/edit/IDiqCuampcDbA2nu8Ui6?p=preview

固定宽度容器内100％视口宽度的背景

4 个答案: