如何扩展截面宽度：使用 css 100%答案

【问题标题】：How to extend section width: 100% using css如何扩展截面宽度：使用 css 100%
【发布时间】：2019-04-16 03:34:51
【问题描述】：

我在width: 1180px; 中有一个部分，我想扩展这个绿色 div 我想设置宽度：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>

【问题讨论】：

如果你想让它更宽，为什么不能把它移到盒子下面？

标签： html css width

【解决方案1】：

试试这个：

.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;
  width: 100%;
}

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

  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用负边距 - 这种方法的唯一问题是如果页面获得垂直滚动，这将添加一个水平滚动，因为 100vw 没有考虑由垂直滚动引起的 20px：

body {
  margin: 0;
}

.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;
  width: 100%;
}

@media screen and (min-width:1180px) {
  .box2 {
    margin: 0 calc(((100vw - 1180px) / 2) * -1);
    width: auto;
  }
}

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

正如我在 cmets 中所说，将绿色 div 移到包装器之外会更好

【讨论】：

【解决方案3】：

您需要使用媒体查询重置边距。最初你有一个负边距，但在 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>

【讨论】：

【解决方案4】：

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

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

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

.box2 {
  height: 50px;
  background: green;
}

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

  </div>
</div>

【讨论】：