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

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

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

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

.widest{margin: 0 -480px}

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

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

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

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

.widest{
  margin: 0 -100%;
}

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

ваши мысли?

9
calc css css3

3 ответов

Да, это возможно, до некоторой степени. Решающая часть-установить ширину элемента в 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);
}
14

EDIT: более простой трюк, чем предыдущие:calc(0px - something) - С блоком - работает, пока calc(0 - something) нет. Вижу Скрипка 3

эти "хитрости" работы:

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

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

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

13

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

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