Описание тега css-calc

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

Проверка CSS3 calc(): Ошибка значения: Ошибка разбора ширины

Мне нужно проверить файл CSS3, где я использую следующий код: width:calc(96.3% - 312px) Возвращает эту ошибку: Ошибка значения: ошибка разбора ширины - 312 пикселей) Мой последний выбор - использовать функцию Javascript при загрузке страницы и измен…
11 июл '14 в 11:21
1 ответ

CSS рассчитывает процентную ширину и деление

У меня есть меню, которое представляет собой список из трех элементов списка: <ul class="menu_container"> <li class="item">Item1</li> <li class="item">Item2</li> <li class="item">Item3</li> </ul> Ширин…
08 янв '16 в 15:11
1 ответ

CSS calc() в border-width?

Могу ли я использовать calc() с border-width? Я хотел бы, чтобы следующий CSS работал: .my-element { border-left-width: calc(10% + 10px); border-right-width: calc(10% + 20px); } Но по какой-либо причине, любую ценность, которую я предоставляю calc()…
24 апр '14 в 08:56
2 ответа

Использование calc() с таблицами

Я пытаюсь получить таблицу с фиксированной шириной tds и переменная ширина tds. Я использую CSS calc() функция, но почему-то кажется, что я не могу использовать % в таблицах. Так вот что у меня так далеко: <table border="0" style="width:100%;bord…
08 апр '13 в 07:14
1 ответ

Переменные CSS с арифметическими операциями не работают в сокращенных свойствах?

Пожалуйста, помогите мне выяснить, почему арифметическая операция в переменной CSS нарушает код. Я начал с простого файла CSS с одним правилом: html { font: 16px/32px Arial; } В браузерах это работает как написано: размер шрифта 16px, высота строки …
20 окт '17 в 14:07
1 ответ

Почему эта функция calc не работает в масштабе преобразования?

calc() по-видимому, работает в преобразовании, но это не так: transform: scale(calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))); Кроме того, это работает, но это в основном та же формула, только с процентом против десятичного числа. Толь…
10 дек '18 в 20:31
1 ответ

Размер шрифта не реагирует после изменения px на rem

После вдохновения от этой ручки Дэнни Винтер, которая показывает, как сделать шрифты отзывчивыми, не используя media queries Я решил сделать другую ручку, но используя rem как ручка Дэнни Винтер использует px, Я сделал некоторые изменения, но это не…
1 ответ

Использование CSS-переменных с Calc() не работает, когда второй параметр

Я новичок в использовании CSS-переменных с calc(), так что извините, если это очевидно, но я пытаюсь выполнить следующие вычисления и не могу понять, почему это не работает: $h2-font-size: 21px; --padding-top: calc(#{$h2-font-size}/3); --padding-bot…
06 дек '18 в 15:42
1 ответ

Firefox: calc() неверное значение свойства

У меня есть элемент с высотой строки, установленной с calc(): line-height: calc(3rem / 2); Демо: http://codepen.io/Ghodmode/pen/vLxZZd Он отлично работает в Chrome, но Инструменты разработчика Firefox говорят, что это недопустимое значение свойства.…
06 янв '16 в 03:06
1 ответ

Я хочу, чтобы в контейнере с содержимым начальной загрузки было два контейнера, один с фиксированной высотой и один с процентом

У меня есть некоторые проблемы, связанные с тем, как запрограммировать адаптивный блок "контента" из начальной загрузки. Как в показанной JsFiddle-Link, я хочу сделать внутреннюю часть Bootstrap content-inner отзывчивый. Во внутреннем окне контента …
18 июл '17 в 22:08
6 ответов

css calc - округлить с двумя десятичными знаками

У меня следующая ситуация: div { width: calc((100% / 11) - 9.09px); } В контексте 100% = 1440px, и 9.09px генерируется в математике с sass. Результат: 94.55px, потому что функция calc округляется в большую сторону, но мне нужно 94.54px (округляется …
10 июн '16 в 17:59
6 ответов

Могу ли я использовать Calc внутри функции Transform:Scale в CSS?

Я пытаюсь вычислить правильную шкалу, чтобы применить к детям внутри родителя, но я не могу использовать calc() внутри transform: scale Функция CSS Я сделал эту функцию с помощью javascript, но меня интересует чистое решение CSS, чтобы избежать как …
05 июл '16 в 14:21
3 ответа

CSS - неточность расчета

У меня есть ul стихия и 5 детей <li>, <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul> имеет display: flex имущество. Я пытался использовать свойств…
04 мар '17 в 06:06
3 ответа

Как вкладывать переменные calc в другие переменные calc в Sass?

Как связать переменную со значением calc в другой переменной? Что я делаю: $height: 25px; $size: calc(#{$height} - 10px); $margin: calc(#{$radiosize} /4); $padding: calc(#{$radiosize} *2); Что просходит: $height: 25px; $size: 15px; $margin: /*does n…
24 сен '15 в 07:39
2 ответа

Использование CSS calc() с.animate()

Я пытаюсь сделать небольшую анимацию, но мне не удается сделать ее отзывчивой, потому что "calc()", похоже, не работает с.animate. Есть ли другое решение здесь? if (time == 1) { $("#message").animate({ marginTop: "calc(-15px + .8vw)" }); } else { $(…
20 июл '17 в 10:24
2 ответа

calc() не рассчитывается в CSS, различия в браузерах

Я создал две таблицы, и я хочу установить width правых 3 столбцов в зависимости от размера первого. Я старался calc((100% - 200px)/3) но он работает не во всех браузерах: Firefox 40 не работает, IE11 не работает, а Chrome 44, кажется, делает это пра…
18 авг '15 в 10:34
1 ответ

calc() в Safari для левой

Я центрирую div внутри другого с помощью функции calc(). Он отлично работает в Chrome, Firefox, Opera и даже в IE, но в Safari этот метод не работает. Любые предложения без фиксации JavaScript? left: -webkit-calc(50% - 25px); left: -moz-calc(50% - 2…
12 апр '14 в 19:57
2 ответа

Div игнорирует свойства высоты и переполнения

Я пытаюсь сделать div с height: calc(100% - 80px) и overflow: scroll, DIV полностью игнорирует оба эти правила. Вот что я пытался: .tab-content { clear: both; height: calc(100% - 80px); overflow: auto; } #tutorial { padding: 5%; } Tutorial <div i…
20 июн '17 в 16:35
1 ответ

calc() и VH обходной путь для Chrome?

Существует ли строгое решение css only для использования vh в calc() функции для хрома? Мне нужно использовать браузер calc(100vh - 25px) для вершины margin прикрепить полосу 25px внизу страницы, но Chrome вызывает у меня проблемы.
31 янв '14 в 09:08
3 ответа

Альтернатива calc()

У меня есть контейнер с автоматической шириной и некоторым полем слева и справа: .inner { margin-left: 20px; margin-right: 20px; width: auto; } И в этом контейнере разные элементы. Некоторые элементы должны занимать 100% страницы (без полей), и для …
04 мар '15 в 12:57