Вопросы с тегом 'css-calc'

calc() - это собственный способ CSS для простой математики прямо в CSS в качестве замены любого значения длины (или почти любого значения числа). Он состоит из четырех простых математических операторов: add (+), вычитайте (-), умножьте (*) и разделите (/).
7

Функция Sass Variable в функции CSS calc()

Я пытаюсь использовать функцию calc() в таблице стилей Sass, но у меня возникают некоторые проблемы. Здесь мой код: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) Если я использую буквальный 50px ...
31 июл. '13 в 22:30
5

Отключить LESS-CSS Overwriting calc()

Сейчас я пытаюсь сделать это в CSS3 в моем коде LESS: width: calc(100% - 200px); Однако, когда компиляция LESS выводит это: width: calc(-100%); Есть ли способ сообщить LESS не компилировать его таким образом и нормально выводить его?
28 июл. '13 в 1:20
3

Менее агрессивные компиляции с CSS3 calc

Используемые мною компиляторы Less (OrangeBits и dotless 1.3.0.5) агрессивно переводя body { width: calc(100% - 250px - 1.5em); } в body { width: calc(-151.5%); } Это, очевидно, нежелательно. Мне интересно, есть ли способ сообщить компилятору L...
15 авг. '12 в 15:15
6

Альтернатива CSS Calc

Я пытаюсь динамически изменять ширину div с помощью CSS и без jquery. Следующий код будет работать в следующих браузерах: http://caniuse.com/calc /* Firefox */ width: -moz-calc(100% - 500px); /* WebKit */ width: -webkit-calc(100% - 500px); /* Oper...
16 апр. '13 в 10:15
3

Почему в методе Calc() должен быть окружен пробелом + или?

Недавно я начал использовать метод calc (...) в CSS. Я быстро понял, что код, такой как: width: calc(100%-2), не будет работать, хотя добавление пробела до и после оператора - устранит проблему, и метод calc будет работать правильно. После небольшо...
22 дек. '15 в 16:01
1

Есть ли способ использовать переменные в Less для оператора ~, например ~ "calc (100% - @spacing)";

Есть ли способ использовать переменные в менее ~, например ~"calc(70% - @spacing)"; Когда я попробовал, он работает только со статическими значениями, например ~"calc(70% - 10px)"; Могу ли я получить строку для оценки до того, как она будет у...
11 янв. '13 в 13:36
3

Обходное решение для модулей CSS Calc View?

Из того, что я видел в других ответах, элементы просмотра CSS не могут использоваться в calc(). Я хотел бы получить следующее утверждение: height: calc(100vh - 75vw) Есть ли какой-нибудь способ обхода, который я могу достичь, используя чисто CSS,...
20 янв. '14 в 0:16
3

Комбинация calc() с attr() в CSS

Мне было интересно, могу ли я объединить функцию calc() с функцией attr() для достижения чего-то вроде следующего: <div class="content" data-x="1"> This box should have a width of 100px </div> <div class="content" data-x="2"> ...
10 дек. '13 в 9:34
1

calc() не работает в медиа-запросах

@media screen and (max-width: calc(2000px-1px)) { .col { width: 200px; } } Значение после вычитания должно быть равно 1999px, однако оно, похоже, не работает. Если я вручную изменю его на 1999px, он отлично работает, поэтому я знаю, что это не пр...
15 мая '14 в 0:10
2

Как использовать переменную Stylus в calc?

В Stylus, как я могу использовать variable в выражении calc? Например, следующее не работает (arrow-size является переменной): arrow-size = 5px left calc(50% - arrow-size)
28 авг. '15 в 13:25
1

CSS calc() - умножение и разделение с единичными значениями

Можно ли использовать calc() для умножения или деления на единичные значения (например, 100%, 5 пикселей и т.д.). Например, я надеялся сделать что-то вроде этого: width: calc(100% * (.7 - 120px / 100%)); Надеясь, что он решил что-то вроде (при ус...
08 апр. '15 в 3:12
1

CSS calc с наследованием

Я хотел бы использовать inherit с calc() следующим образом: #foo{ animation-duration:10s; } #foo > .bar { animation-duration:calc(inherit + 2s); /* =12s */ } Но это, похоже, не работает. Является ли это ошибкой браузера или спецификациями...
06 февр. '14 в 14:42
3

Функция Calc() внутри другого calc() в CSS

Как использовать функцию CSS calc внутри другой функции CSS calc? в соответствии с этим сообщением (" https://developer.mozilla.org/en-US/docs/Web/CSS/calc ") это возможно, но примера нет.
22 дек. '14 в 5:31
1

Операции вложенных вычислений

Надеюсь, это довольно просто. Я хочу использовать операцию CSS calc для выполнения двух вычислений: Я хочу, чтобы моя ширина была эквивалентна (100% / 7) - 2 Однако, если я попытаюсь выполнить более одной операции в операции CSS calc, это не сраб...
22 дек. '13 в 18:11
2

jQuery animate() и CSS calc()

Я попытался установить CSS calc() с помощью jQuery animate, например: $element.animate({ height: 'calc(100% - 30px)' }, 500); и я заметил, что calc() не работает с анимацией jQuery... Я надеюсь, что есть способ сделать это, я не хочу, чтоб...
03 июн. '15 в 11:09