Как увеличить ширину сечения: 100% с помощью CSS

Question

У меня есть раздел внутри 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>

Answer 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>

Answer 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>

Как я уже сказал в своих комментариях, было бы лучше просто переместить зеленый div за пределы вашей оболочки

Answer 3

Вам необходимо сбросить поля, используя медиа-запрос. Изначально у вас есть отрицательное поле, но после 1180px оно будет положительным, создавая нежелательное пространство. Вам также не нужно устанавливать width, используя vw единицу. Сохранение ширины по умолчанию достаточно:

.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>

Answer 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>