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

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

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

Ваши мысли?

Ответы

Ответ 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);
}

Ответ 2

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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