Можно ли получить отрицательное значение с помощью CSS calc()?

Question

Допустим, у нас есть контейнер, который центрирован в окне просмотра...

.centered{margin: 0 auto; width:960px;}

... и внутри этого контейнера у меня есть другой, который должен иметь ширину 100% ширины области просмотра. Я мог бы установить поле на...

.widest{margin: 0 -480px}

... например. Дело в том, что значение не будет -480px, но на самом деле ширина области просмотра (960px) -.centered width / 2 ... все хорошо и легко с calc(), только мне нужен результат, который является отрицательным значением,

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

Я пытался вычесть лот из 0, чтобы получить отрицательное значение, но не пошел.

Я не хочу использовать JS, и у меня есть проблемы только в Webkit - но не с calc () - моя проблема в том, что если я взломаю его на представление, выполнив...

.widest{
  margin: 0 -100%;
}

... моя страница прокручивается по горизонтали в Chrome/Safari.

Твои мысли?

Answer 1

Да, это возможно, в точку. Важной частью является установка ширины элемента в 100vw затем сместить его на отрицательную половину ширины области просмотра плюс половину ширины центрированного элемента, используя, например, calc(-50vw + 200px):

Демо Фиддл

Учитывая HTML

<div id='center'>center
    <div id='full'>full width</div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
#center {
    width:400px;
    height:100%;
    background:red;
    margin:0 auto;
}
#full {
    width:100vw;
    height:100px;
    background:green;
    margin-left:calc(-50vw + 200px);
}

Answer 2

РЕДАКТИРОВАТЬ: более простой трюк, чем предыдущие: calc(0px - something) - с юнитом - работает пока calc(0 - something) не делает. Смотри Fiddle 3

Эти "хитрости" работают:

calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */

где 0 - something нет (по крайней мере, с вашим примером).

Скрипка 1
Скрипка 2

Answer 3

У меня есть другое возможное решение. Вы можете разделить на -2, так что вы получите отрицательный результат

.widest{
  margin-left: calc( (100vw - 960px) / -2 );
}

Answer 4

Вы можете попробовать следующее решение

.some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}