Questions tagged [css-calc]
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).
207
questions
0
votes
0
answers
25
views
CSS animation-delay based on index of an element
Is there a way to set animation-delay equal to i * 1s where i stands for index of the element in a parent element? I mean, in pure CSS (with neither Javascript nor LESS/SASS), maybe with calc().
0
votes
1
answer
80
views
CSS: How to use var() inside calc() inside @media
On a website, I have a changing number of buttons (<li>), which I need to resize if they don't fit in a row on mobile devices.
Mobile devices have different widths and (as stated before) the ...
0
votes
0
answers
29
views
assign @debug or @function @return value to variable in SCSS
Is there any way to pass value to a $variable through @function or @debug I am using multiple Calc methods when it combines in mixins calc() inside calc() don't work.
For example
Html
<div class=&...
1
vote
0
answers
38
views
use css vars from ancestors (with same var name) in css calc
I'd like to have a css var product value in a child element update based on the values of its ancestors.
E.g. is there a way to perform the following in pure css.
Or, whilst css preferred, what would ...
0
votes
1
answer
166
views
Calculating fluid CSS element sizes using CSS using calc(px + vw)
Using this method here: https://css-tricks.com/fun-viewport-units/
I want to calculate how to achieve a specific amount of change between view port sizes 1920px and 375px
Example: I want my element of ...
0
votes
0
answers
21
views
javascript get output of css calc ( a css var that refers to other css vars) [duplicate]
I'd like to get the evaluated output of a css calc that refers to vars from parent elements. For example, the example below should log 21 not NaN. Is there a way to do this?
let outer = document....
1
vote
1
answer
50
views
Is there a pure CSS way to make a child element fit into parent with stepped (width) values
I have a container element that resizes dynamically. Inside the container I have another block element - let's say it is a h1 - by default and design that is the same width.
I would like to make sure ...
1
vote
3
answers
87
views
Adding margin to div pushes it off the screen
I would like to have a 5px margin around each of my divs but when I add it in CSS, there is a 5px margin on every side except for in between the divs and on the bottom. The two divs also overflow off ...
0
votes
0
answers
91
views
How can i use css calc or clamp to apply dynamic styles follow fluid flex container?
on my website i implement a fluid flex container without any media queries like this:
.flexbox-grid {
--min: 20rem;
--gap: 1rem;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
....
1
vote
1
answer
146
views
Is there a way to use use the width of self in a CSS calc rule? [duplicate]
I have already read Maintain the aspect ratio of a div with CSS (not a duplicate, please read further) and the other ways to do it, but here I'm asking something more specific:
Is there a way to use ...
1
vote
2
answers
224
views
Is it possible to use child index in calc in CSS?
What I'm looking to achieve is each child having a diffrent color than the previous one (result would be gradient-like) by multiplying the color value with the child index.
Pseudo-code:
.parent > ...
0
votes
0
answers
26
views
clarification of css width calculation [duplicate]
By trial and error, I calculated the width of a header block:
width: calc(100% - 96px);
width: calc(100vw - 112px);
Both (seem to) produce the same result. I read how width is defined and want to ...
0
votes
1
answer
119
views
CSS var : attributes refer to the same variable but measure different
<html>
<body>
<div></div>
</body>
</html>
:root {
--scrollbar-width: calc(100vw - 100%);
}
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
...
0
votes
1
answer
164
views
CSS calc() doesn't work as expected on Firefox
This code in a CSS block of a div :
--z: calc(1082px - 100%);
--z1: calc(var(--z) * 1000);
--z2: calc(max(var(--z1) * (-1), var(--z1))); /* abs */
--z3: calc((var(--z2) + var(--z1)) / 2);
--z4: ...
3
votes
1
answer
74
views
Why is the width of this element not 0?
I have a width set with a calc, and it should be returning 0 but when I look at the computed width it says 22.2333px.
:root {
--show: 1;
}
.test {
display: inline-block;
overflow: hidden;
...
2
votes
1
answer
169
views
CSS Variables unexpectedly resulting in 0
I'm working on a HTML/CSS-only (i.e. no JS) project which is an example of CSS Variable computing, but I seem to have hit an impasse as once I introduce a new calculation for a new CSS variable, the ...
2
votes
2
answers
805
views
How can I assign the value of a css calc() to a css-variable, and not have it delay the calculation until the css-variable is used
I have been unable to determine from any explanation I could find, about when the value of a css variable has been set., so I conducted a test
The html
<div class="flex">
<...
2
votes
2
answers
223
views
Using calc to indent child element of CSS Grid accurately align with grid columns
I have a content block within a CSS Grid item, which works fine. In some instances I want to be able to indent a child element 1 or 2 columns so accurately so it aligns to its parent grid.
I did ...
3
votes
2
answers
183
views
CSS Calc - always achieve '0' or '1'
I have CSS variable called --size which is set with javascript. Its value will be 0 or any whole number.
I wish to create a new CSS variable using the calc function. I want the value of this new ...
0
votes
0
answers
74
views
calc() to create a canvas which scales in accordance to a device aspect ratio
I'm trying to create a canvas which is sized based on a ratio depending on the device. I have a final image I need to display with the following dimensions:
img {
width: 100vw;
height: 80vh;
}
...
2
votes
1
answer
66
views
Getting CSS Variables to Add Correctly using calc()
I'm experimenting with a new concept using CSS variables as binary registers to create a flow of data with the final calculations being finally displayed later down in the document. The idea works ...
10
votes
4
answers
989
views
Sophisticated proportional triple element progress bar design using only CSS
I have made a custom progress bar, consisting of three separete parts (a uniquely customisable center piece, a left part and a right part) but I'm having difficulty aligning the center block correctly ...
0
votes
0
answers
27
views
CSS calc() working inline but not in class [duplicate]
I have a component that is divided horizontally into thirds. The items on the left and right will each take up a fixed width and the middle element should fill the space in between.
<div>
<...
0
votes
1
answer
194
views
Specify CSS percentage width as a function of viewport width
I have some paragraphs of text on my webpage that I would like to format to occupy a certain percentage of the page's width. I've decided that when the page is 800px wide, the text should occupy 80% ...
0
votes
0
answers
76
views
CSS Variable assignment on <option> selected and default using CSS
I have the following code, which I've been working on as a CSS/HTML proof-of-concept.
The intention is to have variables defined on either at loadtime through the default selected option, or when the ...
1
vote
1
answer
481
views
three li with equal width [duplicate]
I would like to have three li elements with equal width. I used calc, however the code does not work.
width:calc(100%/3);
display:inline-block;
Snippet:
ul {
position: fixed;
bottom: 25px;
...
0
votes
0
answers
30
views
How to use calc function in less [duplicate]
I want to use calc function in less. My required output should be right: calc(-100vw + 400px);. Therefore I used below code in less.
right: calc(~'-100vw + 400px');
But that code is not working. Can ...
1
vote
1
answer
236
views
Multiplying rem units by a value to output deg units
:root {
--length: 10rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
hr {
...
2
votes
1
answer
81
views
How do I rewrite my nested CSS calc operation [duplicate]
How do I rewrite
margin: 15px calc(-100vw / 2 + 1009px / 2); // 1024px -15px padding
Now I have to write all my media queries and specify exact width, minus 15px (in my case) to get it working.
...
2
votes
2
answers
89
views
HTML Flex layout looks different in Internet Explorer
I'm trying to get a simple flex layout to work the same in IE11 as it does in Chrome.
In Chrome it appears like this:
However in IE11 it appears like this:
Here is the code :
html,
body {
...
1
vote
1
answer
871
views
Calc() not working with stroke-dashoffset in Safari and Firefox
Trying to use calc() with the stroke-dashoffset property in Safari (v12+) and Firefox (v84+) results in the browser rendering the value as 0px instead of the expected value. Chrome behaves as expected....
4
votes
1
answer
2k
views
CSS variable calculation of HSL values
I want to have a basic HSL color value which I want to implement as a gradient as follows:
:root {
--hue: 201;
--saturation: 31;
--lightness: 40;
--mainColor: hsl(var(--hue),var(--...
1
vote
1
answer
145
views
Complicated calc() in LESS is not working as expected
i have this calculation in my less file:
height: calc((100vh - 60px) + ((100vw / 9) * 3));
but the result is not what i was expecting, in my chrome devtools the result is:
height: calc(73.33333333vh);...
1
vote
1
answer
69
views
Alignment of fixed width item in percentage based parent
At the moment I have an outer container with a maximum width of 1600 pixels, which can shrink below that based on screen width.
A have an inner container within the outer with a maximum width of 1200 ...
0
votes
1
answer
50
views
Css: min contains 2 expressions with different units
height: min(483px, 100vw * 0.82)
Error: px and vw are not comoatible units
How to get the min between the 2 values above ? Or transform the vw to px ?
0
votes
0
answers
141
views
How to use calc() to get the current height of this element? [duplicate]
I have a div inside another div.
I want to make the inside one in the middle vertically.
I can use this way to achieve it:
calc(50% - 100px ) /* if the height of the inside box is 100px */
However, ...
5
votes
1
answer
402
views
How to avoid negative values from css calc function?
I am using css calc function from css-tricks
calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
I ...
2
votes
0
answers
170
views
How can i work with negative and percentage values in css calc? (Fluid Design)
I found this awesome css calc function from css-tricks
calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport ...
1
vote
1
answer
171
views
Invalid calc() on IE11
Why IE11 can't calc this? I see from the console that it finds it invalid (in the compiled styles it's red underlined)
h6 {
...
font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / ...
1
vote
2
answers
1k
views
CSS Calc setting a new z-index value based on current z-index value
I have a Leaflet map with hundreds of map markers.
Some of these map markers are underneath others, as the map is crowded.
The user would like certain types or criteria of markers to appear on the top ...
0
votes
2
answers
270
views
Using percents as multipliers with CSS calc()
Let's say I define a CSS variable --half to be equal to 50%.
:root {
--half: 50%;
}
Then I can set the width of something to be 50% like this:
.partial {
width: var(--half);
}
So far so good. ...
5
votes
1
answer
241
views
What is the biggest usable number for use in calc() in CSS?
The title says it all.
I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic.
Is it the same as the biggest number in JavaScript?
When I try this with transform the ...
1
vote
1
answer
717
views
Is there a way to make the calc function work with the * operator in Sass?
I'm trying to setup a default font size and then just use it to get some other font sizes.
$base-font-size: calc(100% + 0.25vw); // this is fine
$font-size--2: $base-font-size * 0.5; // the ...
2
votes
2
answers
341
views
Keep Element In Middle Of Excess Space With CSS calc() Function
I have a <main> HTML element that takes up 80% of the <body> element on a page and it has a max-width value of max-width: 1220px.
Outside of this <main> element I have a small SVG ...
0
votes
1
answer
115
views
CSS calc() not working for centring the td element
I want to create a table, the second column (which is represented by a single cell) is put in the center of a page. I am trying to use calc() function in order to do that, however it does not work. ...
2
votes
2
answers
385
views
Adjust 3 box in a row using flexbox [duplicate]
I want to place 3 Box in a row, another 3 in second row. This is working fine if I do not add margin: 2px; and width: calc(33%-4px);. But if I add margin: 2px; and adjust in width as width: calc(33% - ...
11
votes
1
answer
1k
views
Why doesn't min() (or max()) work with unitless 0?
I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px). I've tried several variations of ...
2
votes
1
answer
212
views
Can a CSS variable be used in the recalculation of its own value? [duplicate]
In CSS, can we we multiply a variable by some integer like the code below ?
:root {
--x: 1em;
}
.class2 {
--x: calc(2em * var(--x));
}
6
votes
3
answers
4k
views
CSS min() function to SASS
I have CSS function like below:
width: min(calc(100vw - 51rem), calc(100vh - 2rem));
It's working fine when using a CSS file but not when used in SASS. How can I rewrite this function for SASS?
2
votes
1
answer
217
views
How to use css variables in a calc function
I'm trying to use css variables in a css calc function but it doesn't render as expected.
My code
font-size: calc(var(--typography-headings-h1-minfontsize) + unquote("px") + (var(--typography-...