html - 如何扩展节宽 : 100% using css

Question

我在 width: 1180px; 里面有一个部分 我想扩展这个绿色的 div 我想把 width: 100% 我试过使用 vw 但没有得到但是一些额外的空间即将到来。谁能建议我？有没有其他方法可以使用 CSS。

.wrapper {
  width: 100%;
  position: relative;
  background: #ccc;
}

.inner {
  width: 1180px;
  margin: 0 auto;
  background: pink;
}

.box1 {
  height: 50px;
  background: red;
}

.box2 {
  height: 50px;
  background: green;
  margin-left: calc(-100vw/2 + 100%/2);
  margin-right: calc(-100vw/2 + 100%/2);
  width: 100vw;
}

<div class="wrapper">
  <div class="inner">
    <div class="box1"></div>
    <div class="box2"></div>

  </div>
</div>

Answer 1

您需要使用媒体查询重置边距。最初你有一个负边距，但在 1180px 之后它将是一个正边距，从而产生不需要的空间。您也不需要使用 vw 单位设置 width。保持默认宽度就足够了:

.wrapper {
  width: 100%;
  position: relative;
  background: #ccc;
}

.inner {
  width: 1180px;
  margin: 0 auto;
  background: pink;
}

.box1 {
  height: 50px;
  background: red;
}

.box2 {
  height: 50px;
  background: green;
  margin-left: calc(-100vw/2 + 100%/2);
  margin-right: calc(-100vw/2 + 100%/2);
}
@media all and (max-width:1180px) {
  .box2 { 
    margin:0;
  }
}

<div class="wrapper">
  <div class="inner">
    <div class="box1"></div>
    <div class="box2"></div>

  </div>
</div>