Протягивать div внутри max-width div для быстрого отклика в области просмотра?

Question

Можно ли растянуть и заставить его работать при уменьшении или увеличении ширины окна?Не изменяя ничего, кроме div.wide или внутренних.

Можно ли это как-то сделать в CSS математике или только в JS?

https://codepen.io/rKaiser/pen/GwGNpy

.wide {
  background:green;
  height:200px;
  /**/
  margin-left:-20%;
  margin-right:-20%;
}

Answer 1

Конечно!

Познакомьтесь с вашим новым дружественным CSS-модулем, vw и vh !

Как минимум, ваш код изменится следующим образом:

.wide {
  background:green;
  height:200px;
  // use calc to sort out the left margin to break out of the inner container
  margin-left:calc((100vw - 800px) / -2);
  // set width to full viewport width
  width: 100vw;
}

Вот ваш CodePen, модифицированный для отображения результата: https://codepen.io/anon/pen/KreNGK

Несколько замечаний:

1. Если у вас есть padding или border в элементе .wideВы можете установить box-size: border-box;, чтобы ширина все еще была правильной.( больше по размеру блока )
2. Возможно, вы захотите настроить некоторые медиазапросы для сценариев, в которых область просмотра с меньше 800px innerelement.
3. Выше calc можно было бы упростить до calc(-50vw + 400px);, однако структура, которую я использовал, основана на идее использования переменных (например, с SCSS или LESS), так что это может закончиться calc((100vw - $inner-width) / -2); и по-прежнему работает нормально ...